Bootstrap导航菜单点击后无法自动添加active的处理方法


Posted in Javascript onAugust 10, 2018

Bootstrap提供了很丰富的前后端框架,为不精通CSS的程序猿们提供了很大的便利。前段时间在使用Bootstrap中的菜单控件时,其中的链接点击后,无法自动添加active类,即无法自动激活。需要适当做如下处理才OK。

废话说了,直接上代码:

<ul class="tabbable faq-tabbable">
  <li class="active"><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyContract", new { area = "MyData" })">我的合同</a></li>
  <li><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyCashout", new { area = "MyData" })">我的请款</a></li>
  <li><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyReceive", new { area = "MyData" })">我的入库</a></li>
  <li><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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类,否则就取消。

如此,即可~~

以上这篇Bootstrap导航菜单点击后无法自动添加active的处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
javaScript基础详解
Jan 19 Javascript
angular十大常见问题
Mar 07 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
Vue全局分页组件的实现代码
Aug 10 #Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 #Javascript
JavaScript闭包原理与用法实例分析
Aug 10 #Javascript
vue 动态绑定背景图片的方法
Aug 10 #Javascript
原生JS实现$.param() 函数的方法
Aug 10 #Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 #Javascript
JavaScript创建对象的常用方式总结
Aug 10 #Javascript
You might like
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
php 静态变量的初始化
2009/11/15 PHP
使用php计算排列组合的方法
2013/11/13 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
提拔干部考察材料
2014/05/26 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
MySQL 数据 data 基本操作
2022/05/04 MySQL