0

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

无论如何，有一个关于 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 的结束标签位于文档底部，包含所有内容区域，工作正常……仅供参考！:)）

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

编辑：天哪……差点忘了。这是这个东西的测试版本，有点像：www.indstate.edu/search/index1.htm

4

1 回答 1

0

因此，如果您单击#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;没有一个lis 有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');  
    }
});
于 2012-04-20T12:31:22.520 回答