页面刷新后导航不变
程序员文章站
2022-07-13 15:58:30
...
写导航页的时候,发现刷新一下选中的导航样式就会没有了,所以需要进行处理。
方案:
用sessionStorage对当前选中的导航页索引进行保存,刷新页面后再从sessionStorage里面取出并设置要选中的导航样式。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">测试</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">导航1 </a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</div>
</div>
</nav>
<script type="application/javascript">
$(function(){
$(".nav li").click(function () {
var index = $(this).index();
sessionStorage.setItem("currentNav",index);
$(this).addClass("active").siblings().removeClass("active");
});
window.onload = function () {
var index = sessionStorage.getItem("currentNav");
var li = $(".nav li").eq(index);
li.addClass("active").siblings().removeClass("active");
}
});
</script>
上一篇: 收藏一些tips,仅作学习笔记
下一篇: 欧拉角微分方程的推导