js实现li标签带链接切换选中状态

最新推荐文章于 2022-01-08 15:34:45 发布

橙絮猿~

最新推荐文章于 2022-01-08 15:34:45 发布

阅读量1.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_40555661/article/details/104177333

版权

用js实现超链接导航菜单点击切换选中时的状态

<div class="row  border-bottom">
    <div class="col-lg-12">
        <div class="tab_title">
            <ul class="nav nav-pills">
                <li class="current">
                    <a href="/my">我的主页</a>
                </li>
                <li>
                    <a href="/setting">设置</a>
                </li>
            </ul>
        </div>
    </div>
</div>

    tabTitle: function () {
		// 超链接选项卡切换
        var urlstr = location.href; //获取点击的url
        var urlstatus = false;    //标识点击状态
        $(".tab_title ul li a").each(function () {
            if ((urlstr + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href') != '') {
                $(this).parent("li").addClass('current');   //添加点击状态类
                urlstatus = true;   //切换点击状态
            } else {
                $(this).parent("li").removeClass('current');  //移除点击状态类
            }
        });
    }