菜单动态选中的样式

**

菜单动态选中的样式

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

<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>
//菜单动态选中 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');
  }
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_33750162/article/details/51538177
上一篇bootstrap-fileinput 插件使用总结(最近做项目应用到了这个上传文件的插件,分享下不够完善请指出共同进步)
下一篇wampserver 3.0.4 集成环境64bit
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭