菜单动态选中的样式
Posted 勿忘初心-Lislie杰
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了菜单动态选中的样式相关的知识,希望对你有一定的参考价值。
**
菜单动态选中的样式
**
最近做项目需要优化一下菜单栏,以便于用户知道自己当前操作的是哪个页面,就在网上查找了下资料学习了下并在此总结下
<ul id="menu_list" class="sidebar-menu">
<li>
<a href="index.html">
<span>首页</span>
</a>
</li>
<li>
<a href="info.html">
<span>一级菜单一</span>
</a>
</li>
<li class="treeview">
<a href="#">
<span>一级菜单二</span>
</a>
<ul class="treeview-menu">
<li><a href="stu1.html">二级菜单一</a></li>
<li><a href="stu2.html">二级菜单二</a></li>
</ul>
</li>
</ul>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
//菜单动态选中 js
//获取当前地址栏中的链接
var urlstr = location.href;
var urlstatus=false;
var menu_obj = $("#menu_list a");
//遍历所有菜单
menu_obj.each(function () {
//判断当前菜单是否存在
if((urlstr + ‘/‘).indexOf($(this).attr(‘href‘)) > -1 && $(this).attr(‘href‘)!=‘‘)
{
$(this).parent().addClass(‘active‘);
$(this).parent().parent().parent().addClass(‘active‘); //针对有多级菜单选中的样式添加
urlstatus = true;
}
else
{
$(this).parent().removeClass(‘active‘);
}
});
//加载页面默认选中第一个
if(!urlstatus)
{
menu_obj.parent().eq(0).addClass(‘active‘);
}
from https://blog.csdn.net/sinat_33750162/article/details/51538177
以上是关于菜单动态选中的样式的主要内容,如果未能解决你的问题,请参考以下文章