码迷,mamicode.com
首页 > 其他好文 > 详细

页面刷新-导航高亮不变

时间:2020-10-21 20:49:17      阅读:20      评论:0      收藏:0      [点我收藏+]

标签:this   nbsp   ring   好友   abs   tabs   rgba   sage   htm   

html:

<ul class="nav nav-tabs choose_nav" role="tablist" id="vtab">
                            <li role="presentation" class="active nav-item">
                                <a href="{:url(‘index/personal_right‘)}?id=1"
                                   class="nav-link active">资料</a>
                            </li>
                            <li role="presentation" class="nav-item">
                                <a href="{:url(‘index/personal_image‘)}?id=2"
                                   class="nav-link">相册</a>
                            </li>
                            <li role="presentation" class="nav-item">
                                <a href="{:url(‘index/personal_recharge‘)}?id=3" class="nav-link">充值</a>
                            </li>
                            <li role="presentation" class="nav-item">
                                <a href="{:url(‘index/personal_message‘)}?id=4" class="nav-link">私信</a>
                            </li>
                            <li role="presentation" class="nav-item">
                                <a href="{:url(‘index/personal_friend‘)}?id=5" class="nav-link">好友</a>
                            </li>
                            <li role="presentation" class="nav-item">
                                <a href="{:url(‘index/personal_focus‘)}?id=6" class="nav-link">关注</a>
                            </li>
                        </ul>

js:

$("#vtab li a").each(function () {
        let _winHref = String(window.location); // 监听url变化
        if ($(this)[0].href == _winHref) { //$(this[0].href):当前url
            $(this).addClass("active").parent(li).siblings().find(a).removeClass("active");
            $(this).closest(ul).parent("li").addClass("active").siblings().removeClass("active");
        }
    });

 

页面刷新-导航高亮不变

标签:this   nbsp   ring   好友   abs   tabs   rgba   sage   htm   

原文地址:https://www.cnblogs.com/LindaBlog/p/13850883.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!