<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源点
注意:本文归作者所有,未经作者允许,不得转载