我的代码里有导航栏。 它位于名为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');
})
});
但不管用。
在网站中,每当一个页面重新加载它的erase all previor设置时,它是临时的(现在你的保存使你的活动选项卡为临时的),这意味着它不保存你在页面中所做的事情,为了解决这个问题,你需要使用本地存储,它保存活动选项卡的数据,每当你重新加载页面时,它将分配它保存的数据。 您可以在此了解更多关于本地存储的信息。
希望这能让你有所了解。