提问者:小点点

加载页面后,导航栏活动选项不保持活动状态


我的代码里有导航栏。 它位于名为nav.ejs的ejs文件中

<nav class="navbar navbar-expand-sm bg-dark navbar-dark mr-auto" >
    
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav   ">
            <li class="nav-item">
                <a class="nav-link  " href="#">link1</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">link3</a>
            </li>

        </ul>
    </div>
</nav>

每次我在导航栏中点击一个项目,它就会变成活动的。我将这行代码放置到每个页面。 以便通过单击导航栏中的链接使其变为活动状态。

window.onload = function() {
    document.getElementById('about').classList.add('active');
}

window.onload = function() {
    document.getElementById('write').classList.add('active');
}

window.onload = function() {
    document.getElementById('home').classList.add('active');
};

我希望将这行代码移动到sample.js文件中。 在这个例子中,在一个文件中,我有这段代码。 通过单击每个链接,只执行中的最后一行:

document.getElementById('home').classList.add('active');

我尝试使用jQuery编写它:

$(window).on("load", function() {
   
    $('.nav-link ').click(function() {
        // event.preventDefault();
   
       $(this).addClass('active').siblings().removeClass('active');
         document.getElementById('about').classList.add('active');

      
    })
});

但不管用。


共1个答案

匿名用户

在网站中,每当一个页面重新加载它的erase all previor设置时,它是临时的(现在你的保存使你的活动选项卡为临时的),这意味着它不保存你在页面中所做的事情,为了解决这个问题,你需要使用本地存储,它保存活动选项卡的数据,每当你重新加载页面时,它将分配它保存的数据。 您可以在此了解更多关于本地存储的信息。

希望这能让你有所了解。