页面刷新后导航不变

最新推荐文章于 2023-07-04 17:34:29 发布

Wonder233

最新推荐文章于 2023-07-04 17:34:29 发布

阅读量2.9k

点赞数 1

分类专栏： JavaScript mass 文章标签：导航

本文链接：https://blog.csdn.net/Wonder233/article/details/78563550

版权

JavaScript 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

mass

14 篇文章 0 订阅

订阅专栏

写导航页的时候，发现刷新一下选中的导航样式就会没有了，所以需要进行处理。
方案：
用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>