我需要在链接中添加活动类并在导航页面时更改活动状态。我试过这个但是在切换链接后没有应用更改。 (页面重新加载后无法正常工作)
这是我的代码
$('#shortcuts-main > li').click(function (e) {
$(".shortcut-link-active").removeClass("shortcut-link-active");
$(this).addClass("shortcut-link-active");
});
a{
color:black;
padding-bottom:15px;
display:block;
}
.shortcut-link-active a{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="shortcuts-main">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
</ul>
有任何想法吗?
刷新页面后,对DOM执行的修改将不会保留。解决方案是将数据保存在客户端上,然后在重新加载后读取。
不幸的是localstorage
无法在Stackoverflow上运行,但至少你可以看到一些代码:
$('#shortcuts-main > li').click(function(e) {
$(".shortcut-link-active").removeClass("shortcut-link-active");
$(this).addClass("shortcut-link-active");
console.log('id:', $(e.target).data('id'))
localStorage.setItem('shortcut-link-active', $(e.target).data('id'));
});
const lastActiveLink = localStorage.getItem('shortcut-link-active');
if (lastActiveLink) {
$('#shortcuts-main')
.find(`[data-id='${lastActiveLink}']`)
.parent()
.addClass('shortcut-link-active')
}
a {
color: black;
padding-bottom: 15px;
display: block;
}
.shortcut-link-active a {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="shortcuts-main">
<li>
<a data-id="link-id-1" href="#">Link 1</a>
</li>
<li>
<a data-id="link-id-2" href="#">Link 2</a>
</li>
<li>
<a data-id="link-id-3" href="#">Link 3</a>
</li>
<li>
<a data-id="link-id-4" href="#">Link 4</a>
</li>
</ul>