导航到特定页面时如何保持活动选项卡答案

【问题标题】：How do I maintain active tab when navigating to specific page导航到特定页面时如何保持活动选项卡
【发布时间】：2015-10-27 04:33:39
【问题描述】：

我的页面上有一个导航栏。单击导航栏中嵌入的相对 URL 链接后，如何使我的选项卡变为活动状态？有 jquery 或 javascript 吗？当我单击各个选项卡时，我的页面会刷新，我很困惑如何导航到另一个页面。

<ul class="navbar-nav navbar-right>">
    <li><a href="/reports">Reports</a></li>
    <li><a href="/resources">Resource Center</a></li>           
</ul>

【问题讨论】：

标签： jquery html twitter-bootstrap navbar

【解决方案1】：

这可能会回答你的问题@Jeffrey

$(".nav a").on("click", function(){ 
    $(".nav").find(".active").removeClass("active"); 
    $(this).parent().addClass("active");
});

为您提供更准确的解决方案。

<div class="menu">

    <ul>
    <li><a href="~/link1/">LINK 1</a>
    <li><a href="~/link2/">LINK 2</a>
    <li><a href="~/link3/">LINK 3</a>
    </ul>

</div>
    <script>
    $(document).ready(function(){
    $(".menu ul li a").each(function(){
        if($(this).attr("href")=="www.xyz.com/other/link1")
            $(this).addClass("active");
    })
})    
    </script>
    <style>
    .active { color: red; }

    </style>

【讨论】：

【解决方案2】：

舒曼娜是正确的。但是，当您的页面在每次点击时都刷新时，这将不起作用。

所以正确的做法是，你可以找到带有当前路径的锚标签，并在其中添加一个'selected'类。

$(document).ready(function(){
    var menu = $("a[href*='" + location.pathname + "']");
    menu[0].addClass('active');
});

因此，对于每个页面加载，您都应该检查当前页面并将其设置为一个类。

希望这会对你有所帮助。

【讨论】：