Question

如何在点击链接时设置活动课程？单击时，Link1不会获得活动类。代码如下： HTML部分：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav" id="nav">
        <li id="home" class="active"><a href="/Home/Index">Home</a></li>
        <li id="skill"><a href="/Home/GoToLink1">Link1</a></li>
   </ul>
</div>

我也使用过JQuery：

<script>
$(document).ready(function () {
    $('#nav li a').on('click', function () {
        $(this).parent().parent().find('.active').removeClass('active');
        $(this).parent().addClass('active');
    });
});
</script>

当我点击任何链接时，活动属性无法正常工作。

Answer 1

当您重定向到新页面时，不会保留动态状态。获取当前位置，然后遍历nav菜单。哪个链接与当前位置匹配，使active如下所示。希望它有所帮助。

<script>
    $(document).ready(function () {
        var location = window.location.href;
        $('#nav li a').each(function(){
            if(location.indexOf(this.href)>-1) {
               $(this).parent().addClass('active');
            }
        });
    });
</script>

路由到另一个链接时，导航栏活动类无法正常工作

1 个答案: