问题
I have found a nice tabs system (link to the tab system) on the internet to let the users navigate through my website. However I am not that good in coding. I have somehow managed to get things working.
I am trying/ tweaking for two days to get it working. Recording to this code I would be able to make a link that will open a specified tab. How could you make a link that -when clicked on it- would open the specified tab.
This code will do the trick but do not know how to implement this code in my existing Javascript code.
CODE:
var $tabs = $('#example').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
Found this code at this website
HTML CODE:
<div id="tabs">
<ul>
<li><a class="active" href="#tab1">HOME</a></li>
<li><a href="#tab2">SERVICES</a></li>
<li><a href="#tab3">OPTIONS</a></li>
<li><a href="#tab4">ABOUT US</a></li>
<li><a href="#tab5">CONTACT US</a></li>
</ul><!-- //Tab buttons -->
<div class="tabDetails">
<div id="tab1" class="tabContents">
<h1>Title1</h1>
<iframe src="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="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="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="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="Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab5 -->
</div><!-- //tab Details -->
</div><!-- //Tab Container -->
CSS:
<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;}
#tabs{
background:#f0f0f0;
border:1x solid #fff;
margin:100px auto;
padding:20px;
position:absolute;
width:1315px;
}
#tabs ul{
overflow:hidden;
border-left:0px solid #fff;
height:80px;
position:center;
z-index:100;
}
#tabContaier li{
float:left;
list-style:none;
}
#tabs li a{
background:#ddd;
border:3px solid #ffff;
border-left:0;
color:#666;
cursor:pointer;
display:block;
height:35px;
line-height:35px;
padding:0 98px;
text-decoration:none;
text-transform:bold;
}
#tabs li a:hover{
background:#fff;
}
#tabs li a.active{
background:#fbfbfb;
border:px solid #fff;
border-right:px;
color:#333;
}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px px;
}
.tabContents{
padding:px
}
.tabContents h1{
font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
padding:0 0 px;
width:auto;
</style>
JAVASCRIPT CODE:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".selector" ).tabs( "refresh" );
// 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 false;
});
});
</script>
回答1:
Your problem was you were selecting the tab with a different jquery tab. Use this Javascript function to change the selected tab.
function selectTab(tabIndex) {
var selector = "a[href='#tab" + tabIndex + "']";
var tab = "#tab" + tabIndex;
$("#tabContaier ul li a").removeClass("active");
$(selector).addClass("active");
$(".tabContents").hide();
$(tab).fadeIn();
}
Link:
<a href="#" onclick="selectTab(2);" >Go to tab 2</a>
This will work if you use the same link nomenclature as you are using now (href for links as "tab1, tab2" etc, and the divs named "tab1, tab2" etc... Good luck.
回答2:
It looks like you're over-complicating this and trying to recreate the actions of the JQuery UI tabs. You can eliminate all but the inital tabs creation and the click event. The only part of the other JS you have posted that might actually do anything is the fadeIn() As for styling, don't assign and remove the active class, use the .ui-tabs-active class. Style the background color of the li, not the a or your a style will override the li.ui-tabs-active and they will stay grey even on hover/selection. See example here:
See fiddle demo here: http://jsfiddle.net/webchemist/Dpg2W/
Also you have some CSS errors:
#tabs li a.active{
background:#fbfbfb;
border:px solid #fff;
border-right:px; /*no numeric value given for # of pixels*/
color:#333;
}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px px; /*no numeric value given for # of pixels in 2nd value*/
}
.tabContents{
padding:px /*no numeric value given for # of pixels*/
}
.tabContents h1{
font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
padding:0 0 px;
width:auto;
/*no closing brace for .tabContents h1*/
</style>
来源：https://stackoverflow.com/questions/14570267/how-to-open-a-jquery-tab-from-a-link-that-is-outside-the-tab