js实现动态改变菜单栏颜色(兄弟节点的知识)

wylc123 1年前 ⋅ 844 阅读
<el-scrollbar class="nav-left">
            <ul>
                <li class="n-s">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-list"></use>
                    </svg>
                    <a href="#" class="n-s-a">客户列表管理</a>
                </li>
                <li class="n-s cur">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pic"></use>
                    </svg>
                    <a href="/BaseMap/BaseMapList" class="n-s-a">底图管理</a>
                </li>
                <li class="n-s">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ceshi"></use>
                    </svg>
                    <a href="#" class="n-s-a">测点管理</a>
                </li>
                <li class="n-s">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-date"></use>
                    </svg>
                    <a href="#" class="n-s-a">数据管理</a>
                </li>
                <li class="n-s">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baobiao"></use>
                    </svg>
                    <a href="#" class="n-s-a">数据统计</a>
                </li>
                <li class="n-s">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fire"></use>
                    </svg>
                    <a href="#" class="n-s-a">报警管理</a>
                </li>
                <li class="n-s">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sql"></use>
                    </svg>
                    <a href="#" class="n-s-a">数据库管理</a>
                </li>
                <li class="n-s">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-manager"></use>
                    </svg>
                    <a href="#" class="n-s-a">用户管理</a>
                </li>
            </ul>
        </el-scrollbar>

当加上cur样式时菜单选中,js实现:

<script type="text/javascript">
        // 左侧菜单点击点亮
        $(function(){$('.nav-left ul li').click(function() {
            debugger
            var _this=$(this);
            _this.addClass('cur').siblings('li').removeClass('cur');
        });
        });
    </script>

 

更多内容请访问:IT源点

相关文章推荐

全部评论: 0

    我有话说: