I am searching and tweaking all the day to fix this issue. I have searched the whole stackoverflow forum for the solutions that is fitting to my situation.I have 5 tabs on my homepage. I would like to use links outside the tab to jump to and open the desired tab. When I click on Tab2 it jumps to the top of the page but it wont open tab2 it stays on tab1 (HOME tab). How to fix this?Link to specific tab:\[code\]<a href="http://stackoverflow.com/questions/14553567/#" goto="tab2">Tab2</a> \[/code\]HTML CODE: \[code\]<div id="tabContaier"> <ul> <li><a class="active" href="http://stackoverflow.com/questions/14553567/#tab1">HOME</a></li> <li><a href="http://stackoverflow.com/questions/14553567/#tab2">SERVICES</a></li> <li><a href="http://stackoverflow.com/questions/14553567/#tab3">OPTIONS</a></li> <li><a href="http://stackoverflow.com/questions/14553567/#tab4">ABOUT US</a></li> <li><a href="http://stackoverflow.com/questions/14553567/#tab5">CONTACT US</a></li> </ul><!-- //Tab buttons --> <div class="tabDetails"> <div id="tab1" class="tabContents"> <h1>Title1</h1> <iframe src="http://stackoverflow.com/questions/14553567/Home.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe > </div><!-- //tab1 --> <div id="tab2" class="tabContents"> <h1>Title2 </h1> <h2> </h2> <h3> </h3> <iframe src="http://stackoverflow.com/questions/14553567/Services.html" width="1150" height="640" frameBorder="0" scrolling="no">Browser not compatible. </iframe > </div><!-- //tab2 --> <div id="tab3" class="tabContents"> <h1>Title3</h1> <iframe src="http://stackoverflow.com/questions/14553567/Options.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe > </div><!-- //tab3 --> <div id="tab4" class="tabContents"> <h1>Title4 </h1> <iframe src="http://stackoverflow.com/questions/14553567/Aboutus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe > </div><!-- //tab4 --> <div id="tab5" class="tabContents"> <h1>Title5</h1> <iframe src="http://stackoverflow.com/questions/14553567/Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe > </div><!-- //tab5 --> </div><!-- //tab Details --></div><!-- //Tab Container -->\[/code\]CSS:\[code\]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery Tab</title><style type="text/css">*{margin:10; padding:0;}body{ font:normal 14px/1.5em Arial, Helvetica, sans-serif;}a{outline:none;}#tabContaier{ background:#f0f0f0; border:1x solid #fff; margin:100px auto; padding:20px; position:absolute; width:1315px;} #tabContaier ul{ overflow:hidden; border-left:0px solid #fff; height:80px; position:center; z-index:100; } #tabContaier li{ float:left; list-style:none; } #tabContaier li a{ background:#ddd; border:3px solid #ffff; border-left:0; color:#666; cursor
ointer; display:block; height:35px; line-height:35px; padding:0 98px; text-decoration:none; text-transform:bold; } #tabContaier li a:hover{ background:#fff; } #tabContaier li a.active{ background:#fbfbfb; borderx solid #fff; border-rightx; color:#333; } .tabDetails{ background:#fbfbfb; border:1px solid #fff; margin:34px px; } .tabContents{ paddingx} .tabContents h1{ font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif; padding:0 0 px; width:auto;</style>\[/code\]JAVASCRIPTCODE:\[code\]<script type="text/javascript" src="http://stackoverflow.com/questions/14553567/js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(document).ready(function(){ // Hide all tab conten divs by default $(".tabContents").hide(); // Show the first div of tab content by default $(".tabContents:first").show(); //Fire the click event $("#tabContaier ul li a").click(function(){ // Catch the click link var activeTab = $(this).attr("href"); // Remove pre-highlighted link $("#tabContaier ul li a").removeClass("active"); // set clicked link to highlight state $(this).addClass("active"); // hide currently visible tab content div $(".tabContents").hide(); // show the target tab content div by matching clicked link. $(activeTab).fadeIn(); return true; });});</script>\[/code\]
ointer; display:block; height:35px; line-height:35px; padding:0 98px; text-decoration:none; text-transform:bold; } #tabContaier li a:hover{ background:#fff; } #tabContaier li a.active{ background:#fbfbfb; borderx solid #fff; border-rightx; color:#333; } .tabDetails{ background:#fbfbfb; border:1px solid #fff; margin:34px px; } .tabContents{ paddingx} .tabContents h1{ font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif; padding:0 0 px; width:auto;</style>\[/code\]JAVASCRIPTCODE:\[code\]<script type="text/javascript" src="http://stackoverflow.com/questions/14553567/js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(document).ready(function(){ // Hide all tab conten divs by default $(".tabContents").hide(); // Show the first div of tab content by default $(".tabContents:first").show(); //Fire the click event $("#tabContaier ul li a").click(function(){ // Catch the click link var activeTab = $(this).attr("href"); // Remove pre-highlighted link $("#tabContaier ul li a").removeClass("active"); // set clicked link to highlight state $(this).addClass("active"); // hide currently visible tab content div $(".tabContents").hide(); // show the target tab content div by matching clicked link. $(activeTab).fadeIn(); return true; });});</script>\[/code\]