Question

这里的第一个问题是用户，所以请在这个菜鸟上轻松一下！

无论如何，有一个关于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的结束标记位于文档底部，包围所有内容区域，工作正常......只是一个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');  
    }
});

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

1 个答案: