首页 > 其他 > 详细

菜单动态选中的样式

时间:2018-05-17 17:14:23      阅读:42      评论:0      收藏:0      [点我收藏+]

标签:TreeView   inf   word   多级   rom   HA   dcl   CA   parent   

**

菜单动态选中的样式

** 
最近做项目需要优化一下菜单栏,以便于用户知道自己当前操作的是哪个页面,就在网上查找了下资料学习了下并在此总结下

<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

菜单动态选中的样式

标签:TreeView   inf   word   多级   rom   HA   dcl   CA   parent   

原文:https://www.cnblogs.com/shizhijie/p/9052048.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号