jQuery选项卡 - 使当前选项卡突出显示从单独的导航

Question

作为用户在这里的第一个问题，所以请在这个noob上轻松！

无论如何，有一个关于jQuery选项卡的快速问题。不是UI版本，而是一个不同的版本。我正在试图做的是能够激活从一个单独的导航区域的链接，但得到所选标签显示为“当前”这是我使用的脚本：

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#tabs div').hide(); 
$('#tabs div:first').show(); 
$('#tabs ul li:first').addClass('active'); 

$('#tabs ul li a').click(function(){ 
    $('#tabs ul li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    var currentTab = $(this).attr('href'); 
    $('#tabs div').hide(); 
    $(currentTab).show(); 
    return false; 
}); 
$('#sitenav ul li a').click(function(){ 
     $('#tabs ul li').removeClass('active'); 
     $(this).parent('#tabs ul li a').addClass('active'); 
     var currentTab = $(this).attr('href'); 
     $('#tabs div').hide(); 
     $(currentTab).show(); 
     return false; 
}); 
}); 
</script> 

这里是二级导航访问此：

<div id="sitenav"> 
    <ul> 
    <li class="home"><a href="/search/">Search ISU...</a></li> 
    <li><a href="#tab1" title="Faculty/Staff">Faculty/Staff</a></li> 
    <li><a href="#tab2" title="Student">Student</a></li> 
    <li><a href="#tab3" title="Department">Department</a></li> 
    <li><a href="#tab4" title="Website">Website</a></li> 
    </ul> 
</div> 

只是为了美观的原因，这里是实际的标签领域的原始导航：

<div id="tabs"> 
<ul> 
<li><a href="#tab1">Faculty/Staff</a></li> 
<li><a href="#tab2">Student</a></li> 
<li><a href="#tab3">Departments</a></li> 
<li><a href="#tab4">ISU Website</a></li> 
</ul> 

（对于“标签”结束的div标签在底部的文件包围所有的内容区域，哪些工作正常...只是一个fyi！ :)）

我能做的就是让“sitenav”实际链接到其他区域，但对于我的生活，我无法让标签突出显示并成为“当前”。当然，这只是我可以忽略的一小部分，但也许新鲜的眼睛可能会看到它！谢谢你们！

编辑：jeez ...差点忘了。这里是这个东西在测试版本的行动，排序：www.indstate.edu/search/index1.htm

Answer 1

所以，如果你点击＃tab1你想在另一个列表中突出显示？ 我会做这样的：

$('#sitenav ul li a').click(function(){ 
    $('#tabs ul li').removeClass('active'); 
    var currentTab = $(this).attr('href'); 
    $('#tabs ul li a[href="'+currentTab +'"]').parent().addClass('active'); 
    $('#tabs div').hide(); 
    $(currentTab).show(); 
    return false; 
}); 

，如果你从另一个网页浏览，页面从头开始渲染，所以它不会不管你有什么最后一页上设置为活动选项卡或哈希值。如果要选择活动选项卡并显示激活的元素，则必须在页面加载时执行此操作。 所以在这种情况下，我会确保在我的css #tabs div有display: none;和li没有active默认类。 和你需要的东西是这样的：

$(document).ready(function(){ 
    var currentTab; 
    if(window.location.hash){ 
     // check if this is an existing tab 
     if($('#tabs ul li a[href="'+window.location.hash+'"]').length > 0){ 
      currentTab = window.location.hash; 
     } 
    } 
    if(currentTab){ 
     //select and show the current tab 
     $('#tabs ul li a[href="'+currentTab +'"]').parent().addClass('active'); 
     $(currentTab).show(); 
    } else { 
     //select and show the first tab 
     $('#tabs div:first').show(); 
     $('#tabs ul li:first').addClass('active'); 
    } 
});