菜单动态选中的样式

原创 2016年05月30日 15:06:41

**

菜单动态选中的样式

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

<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');
  }
版权声明:本文为博主原创文章,未经博主允许不得转载。

给bootstrap-treeview增加点击事件,单击菜单也能展开和折叠

希望给Bootstrap treeView插件点击列表也能展开子节点,所以对li元素增加了onClick方法。 (一)首先修改bootstrap-treeview.js源码,找到, 增加onClick...
  • zsg88
  • zsg88
  • 2016年03月04日 22:47
  • 13126

根据选中treeView节点的值弹出菜单界面

private void treeViewMenu_MouseDown(object sender, MouseEventArgs e)         {             if (e.But...
  • u013908405
  • u013908405
  • 2015年12月24日 10:58
  • 294

JQuery实现动态生成树形菜单

JQuery实现动态生成树形菜单  分类: 系统运维 JQuery实现动态生成树形菜单 有一个需求:菜单导航条需要依据不同的权限动态提取出来。计划是将功能模块与用户权限之间的关系...
  • ccecwg
  • ccecwg
  • 2014年04月23日 10:06
  • 5219

jquery实现ul_li菜单展开收起效果

  • 2013年09月06日 12:07
  • 773B
  • 下载

html li css选中状态切换

思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class。 具体演示如下:...
  • u013547384
  • u013547384
  • 2016年12月08日 19:18
  • 6039

ul列表选中变色效果

本文讲解了如何动态生成ul列表,如何点击li改变本li样式
  • yinkgh
  • yinkgh
  • 2016年09月07日 10:59
  • 7429

Javascript:控制Li选中项样式

Javascript控制li选中项样式
  • a497785609
  • a497785609
  • 2011年02月25日 17:28
  • 8078

漂亮的菜单样式

  • 2012年08月29日 15:05
  • 64KB
  • 下载

jQuery高亮当前选中菜单

假如页面中有以下菜单 首页 归档 分类 关于 如果不是Bootstrap自行定义active CSS样式 $(document).ready(function(){ $...
  • itmyhome
  • itmyhome
  • 2015年01月09日 22:42
  • 5229

laravel框架-点击不同的菜单,选中后进行样式转移

点击学生列表效果如下: 2.点击新增学生效果如下: 提供思路:在模板里进行判断,如果请求的路径和当...
  • u014796999
  • u014796999
  • 2016年09月16日 13:34
  • 1087
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:菜单动态选中的样式
举报原因:
原因补充:

(最多只允许输入30个字)