菜单动态选中的样式

原创 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 中列表行 <tr> 的显示样式

原文及更多内容:http://yysource.sourceforge.net/?p=83 为了在点击第一个中的某个时能显示/隐藏下一行,需要在显示的时候将下一行的display设置为table...

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

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

Freemarker 树形导航菜单(递归)

很多导航菜单是树形的,即一级一级往下细分,这样的结构固然需要用递归来处理。 对于Freemarker 来说,宏就相当于函数,其定义了签名及参数列表。 所以在页面应这样写: ...

这是一个动态改变选中的li的样式(增加/删除),

这是一个动态改变选中的li的样式(增加/删除),其他同样适用 乌拉拉拷贝的别人的代码~菜鸟真的感觉太神奇了哈哈 ...

js动态设置select下拉菜单的默认选中项

利用javascript设置select下拉菜单的选中项。

纵向菜单样式

  • 2015年04月19日 22:14
  • 4KB
  • 下载

精通CSS+DIV网页样式与布局--制作实用菜单

在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括...

系统状态栏样式-沉浸式菜单

  • 2015年09月29日 15:08
  • 1.78MB
  • 下载

七种样式的水平菜单

  • 2014年09月28日 10:33
  • 263KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:菜单动态选中的样式
举报原因:
原因补充:

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