欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

页面刷新后导航不变

程序员文章站 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>
相关标签: 导航