菜单动态选中的样式

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

以上是关于菜单动态选中的样式的主要内容,如果未能解决你的问题,请参考以下文章

jquery动态添加下拉框选项设置下拉框样式怎么做啊

急急~~关于css控制 tab菜单选中状态的问题

Android - 导航抽屉 - 与动态菜单项重叠的片段

如何设置Eclipse/MyEclipse代码注释样式

Axure RP 案例 - 左侧菜单栏导航

如何修复重叠的片段