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

作为一个用户，这里的第一个问题是，请在这个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>

tabs div的结束标记位于文档底部，环绕所有内容区域，工作正常…仅供参考！：

我所能做的就是让sitenav实际链接到其他区域，但就我而言，我无法让选项卡高亮显示并成为最新的。当然这是我一直忽略的小东西，但也许新的眼睛会看到它！谢谢大家!

---

编辑：天哪……差点忘了。这是这个东西的测试版本，有点：

那么如果你点击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选项卡div中有display:none；默认情况下，没有一个lis具有活动类。 你需要这样的东西：

$(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');  
    }
});

---

如果我读对了，是的……如果我单击sitenav上的tab1，tab1上的tab1将高亮显示。让我试一试，然后回应。谢谢好的，从索引来看，它工作得很好，因为散列是相对于那个页面的，但是我需要做什么才能使它从另一个页面工作呢？我试过这样做：`$'tabs ul li a[href=index.htm'+currentTab+']'。parent.addClass'active'；'但它不起作用…因为它没有突出显示或显示div内容。我已经编辑了答案并添加了代码，可以做你想要的。似乎不起作用。一个例子是使用“示例”上的选项卡位置，单击后突出显示的选项卡将是tab2。我一直在试图修改你的代码，但我无法使它工作。非常感谢你在这方面的帮助！