Question

我想动态地将活动类添加到菜单列表项，但是代码可以工作但是一秒钟，活动的类永远不会停留。这是我的代码：

JS：

$(document).ready(function() { 
    $("ul.nav li").click(function(e) {
    $("ul.nav li.active").removeClass("active");
    $(this).addClass("active");
});

HTML：

<div class="collapse navbar-collapse navbarHeaderCollapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="index.php">Home</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Update info<b class="caret"></b></a>
            <ul class="dropdown-menu">
                 <li><a href="changepassword.php">Change password</a></li>
                 <li><a href="update.php">update name</a></li>
            </ul>
        </li>
        <li><a href="logout.php">logout</a></li>
    </ul>
</div>

Answer 1

您可以使用localstorage -

来完成此操作

在点击中存储持久性项目

$('.nav li').click(function () {
    $(this).addClass('active');

    //Here you set the item in storage                    
    localStorage.setItem("LastActiveMenu", $(this).index());    

});

获取文档准备就绪的最后一个活动项目

var lastActiveMenuItem = localStorage.getItem("LastActiveMenu");
if (lastActiveMenuItem != null) {
    var menuItem = $('.nav').find('li').eq(lastActiveMenuItem);
    menuItem.addClass('active');
}

Answer 2

当您重定向到下一页时，DOM会重新加载并丢失设置。你应该在后端而不是在前端进行。

如果您使用的是PHP，代码应该是这样的：

$thisPage = "contact";
<a href="/contact" <?php if ( $thisPage == "contact" ) { echo "class='active'" } ?>>Contact Us</a>

bootstrap 3活跃课程总是回到家里

2 个答案: