jsp/html公共菜单部分刷新页面添加选中样式

最新推荐文章于 2022-10-21 00:24:56 发布

R_renee

最新推荐文章于 2022-10-21 00:24:56 发布

阅读量1.7k

点赞数

分类专栏：前端封装布局

本文链接：https://blog.csdn.net/R_renee/article/details/59057495

版权

前端封装布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

公共部分的菜单页面（jsp/html），实现选择该菜单刷新后定义选中菜单的样式

代码片段：

<ul>
    <li class="sidebar-toggler-wrapper hide">
        <div class="sidebar-toggler">
            <span></span>
        </div>
    </li>
    <li class="nav-item start active open">
        <a href="_index_" class="nav-link nav-toggle">
            <i class="icon-home"></i>
            <span class="title">menu1</span>
            <span class="selected"></span>
            <!-- <span class="arrow  open"></span> -->
        </a>
    </li>
    <li class="nav-item">
        <a href="javascript:;" class="nav-link nav-toggle">
            <i class="fa fa-dashboard"></i>
            <span class="title">menu2</span>
            <span class="selected"></span>
            <span class="arrow open"></span>
        </a>
        <ul class="sub-menu">
            <li class="nav-item ">
                <a href="_rtm_" class="nav-link ">
                    <span class="title">sub_menu1</span>
                    <span class="selected"></span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link ">
                    <span class="title">sub_menu2</span>
                    <span class="selected"></span>
                </a>
            </li>
        </ul> 
    </li>
</ul>

js代码：

var u = location.href; 
var menu = u.substr(u.lastIndexOf('/')+1 , u.length); //截取当前选中菜单的url
$(".nav-item").each(function(){
    var po = $(this).find("a");  
    if(po.attr("href") == menu){    //匹配标签集合
        po.parents("li").addClass("active open").siblings().removeClass("active open");     //设置菜单样式
    }
});