Bootstrap导航菜单点击后无法自动添加active的处理
来源:互联网 发布:centos yum配置本地源 编辑:程序博客网 时间:2024/06/09 16:08
Bootstrap提供了很丰富的前后端框架,为不精通CSS的程序猿们提供了很大的便利。前段时间在使用Bootstrap中的菜单控件时,其中的链接点击后,无法自动添加active类,即无法自动激活。需要适当做如下处理才OK。
废话说了,直接上代码:
<ul class="tabbable faq-tabbable"> <li class="active"><a href="@Url.Action("Index", "MyContract", new { area = "MyData" })">我的合同</a></li> <li><a href="@Url.Action("Index", "MyCashout", new { area = "MyData" })">我的请款</a></li> <li><a href="@Url.Action("Index", "MyReceive", new { area = "MyData" })">我的入库</a></li> <li><a href="@Url.Action("Index", "MyCashback", new { area = "MyData" })">我的付款</a></li></ul>
这是一个典型的导航菜单,现在添加如下的脚本处理:
$(function () { $(".faq-tabbable").find("li").each(function () { var a = $(this).find("a:first")[0]; if ($(a).attr("href") === location.pathname) { $(this).addClass("active"); } else { $(this).removeClass("active"); } }); })
原理很简单,就是找到所有的li
标签,对其a
标签的链接地址进行判断,如何和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active
类,否则就取消。
如此,即可~~
2 0
- Bootstrap导航菜单点击后无法自动添加active的处理
- bootstrap导航栏 active无法动态显示
- bootstrap 公用导航栏添加active
- bootstrap中下拉菜单点击后不关闭的方法
- bootstrap单击导航条下的li后,自动收回
- 导航条 点击后 添加背景颜色
- ThinkPHP点击菜单后页面无法出来
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法
- Bootstrap学习--导航菜单
- bootstrap(菜单、按钮、导航)
- Bootstrap菜单导航
- Bootstrap菜单、导航、按钮
- listView添加 头部后的点击事件的处理
- bootstrap导航条的二级菜单下实现三级菜单
- C#点击按钮后其他按钮排列类似导航菜单
- BootStrap模态框,点击保存后实现模态框自动关闭的思路
- Android对话框的高级设置《一》设置对话框按钮的图像和在内容文本中插入图像
- Android WebView —— Java 与 JavaScript 交互总结
- Android中JNI的使用方法
- spi子系统结构
- 第十三周项目2-Kruskal算法的验证
- Bootstrap导航菜单点击后无法自动添加active的处理
- Oracle执行计划详解
- Angular2初级篇之环境搭建
- linux 配置和加载动态库 ldconfig
- 关于创建子类对象的时候是否为父类的私有变量分配了内存
- Java中的线程同步
- Android AlertDialog对话框自定义风格的另类实现
- Nginx Location配置总结
- 中国股市十大传奇人物