Question

我的页面上有一个导航栏。单击导航栏中嵌入的相对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>

Answer 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>

Answer 2

舒马纳是对的。但是，当您的页面在每次点击时刷新时，这都不起作用。

所以正确的方法是，您可以找到包含当前路径的锚标记，并添加一个＆＃39;选择＆＃39;上课。

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

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

希望这会对你有所帮助。

导航到特定页面时如何维护活动选项卡

2 个答案: