Question

我的代码中有一个导航栏。该文件位于ejs文件名nav.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');

      
    })
});

但它不起作用。

Answer 1

在网站中，每当页面重新加载其内容时，它就会清除所有以前设置为临时的设置（现在，您的保存使您的活动标签变为临时设置），这意味着它不会保存您在页面中所做的操作，因此您可以解决此问题需要使用本地存储，该存储将保留活动标签的数据，并且每当您重新加载将分配其数据的页面时，都将使用该存储。您可以在this中了解有关本地存储的更多信息。

希望这会给您一些想法。

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

1 个答案: