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 相关文章推荐
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
Vue+Django项目部署详解
May 30 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 Calender(日历)代码分享
2014/01/03 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
Vue响应式原理详解
2017/04/18 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python实现端口复用实例代码
2014/07/03 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Python错误处理操作示例
2018/07/18 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
python实现简单图书管理系统
2019/11/22 Python
如何基于Python实现数字类型转换
2020/02/07 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
《九寨沟》教学反思
2014/04/08 职场文书
社区党员公开承诺书
2014/08/30 职场文书
财务会计实训报告
2014/11/05 职场文书
中学生自我评价范文
2015/03/03 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
react中的DOM操作实现
2021/06/30 Javascript
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技