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

2024-04-20 20:50:03

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的处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Bootstrap菜单按钮及导航实例解析

下拉菜单特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-tog
解决bootstrap中下拉菜单点击后不关闭的问题

bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了,这显然达不到很多用户需求,如何实现当点击需要点击的地方后才关闭下拉框呢,下面来简单介绍下方法,比如要做一个下拉框筛选查询,下拉菜单展示图如下: 解决方法: 指定要操作的元素的click事件停止传播-定义属性值data-stopPropagation的元素点击时停止传播事件 //下拉框查询组件点击查询栏时不关闭下拉框 $("body").on('click','[data-s
解决bootstrap下拉菜单点击立即隐藏bug的方法

昨天用jQuery和bootstrap实现下拉菜单复选框,今天把做好的demo组合进项目里,发现有点bug,就是点击银行复选框的时候,每点一次dropdown-menu这个div会立即隐藏,这就导致每次只能选一个. 这应该是事件传播的原因,代码修改如下: var banks = $('.all').siblings().children(); $('.all>input').click(function() { var flag = $(this).prop('checked'); banks.
Bootstrap导航菜单点击后无法自动添加active的处理方法

Bootstrap提供了很丰富的前后端框架,为不精通CSS的程序猿们提供了很大的便利.前段时间在使用Bootstrap中的菜单控件时,其中的链接点击后,无法自动添加active类,即无法自动激活.需要适当做如下处理才OK. 废话说了,直接上代码: <ul class="tabbable faq-tabbable"> <li class="active"><a href="@Url.Action(" rel="
第九篇Bootstrap导航菜单创建步骤详解

创建一个标签式的导航菜单的步骤是: •在ul标签上加上class nav •再ul标签上加上 class .nav-tabs. 在li标签上加上 active表示激活该项 <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">
一个炫酷的Bootstrap导航菜单

本文实例为大家分享了Bootstrap导航菜单的具体代码,供大家参考,具体内容如下效果图: 点击菜单的箭头有点小问题,后面改,不是很影响. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrom
BootStrap中按钮点击后被禁用按钮的最佳实现方法

Bootstrap中点击后禁用按钮与js有什么区别呢要如何来实现呢,今天我们就一起来看一篇关于Bootstrap中点击后禁用按钮的最佳方法,具体的例子如下所示．为了防止在Bootstrap中点击按钮多次提交,所以希望点击按钮后禁用按钮. 具体实现方法如下: //禁用button $('button').addClass('disabled'); // Disables visually $('button').prop('disabled', true); // Disables visual
jQuery自动添加表单项的方法

本文实例讲述了jQuery自动添加表单项的方法.分享给大家供大家参考.具体如下: 这里实现通过点击按钮动态添加一个表单输入项 <script type="text/javascript" charset="utf-8"> $(function() { var fieldCount = 1; $("#addFieldButton").click(function() { fieldCount++; if(fieldCount <=
Java自动添加重写的toString方法详解

Java怎么自动添加重写的toString方法,这里我们将给大家介绍详细的解决方法. 首先,添加一个任意的类,具体的类型没有要求,然后在主程序中创建对象,这里要求构造方法的位置要求必须是可实例化的类或其子类对象. 然后在主程序中创建对象,这里要求构造方法的位置要求必须是可实例化的类或其子类对象. 然后,在该程序中点击鼠标右键,找到鼠标右键,找到source选项. 在第三步中找到source选项中,找到generate toString( )方法. 进入之后,什么都不用选择,直接点击界面最下方的o
解决bootstrap导航栏navbar在IE8上存在缺陷的方法

在Bootstrap的官网上,提供了一种导航栏的组件: 只要在站点文件夹放好JQ与Bootstrap输入如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
PHP 下载文件时自动添加bom头的方法实例

首先弄清楚,什么是bom头?在Windows下用记事本之类的程序将文本文件保存为UTF-8格式时,记事本会在文件头前面加上几个不可见的字符(EF BB BF),就是所谓的BOM(Byte order Mark).不仅限于记事本保存的文件,只要在文件的开口包含了EF BB BF 几个不可见的字符(十六进制应该是是xEFxBBxBF,用二进制编辑文件可见).这像是一个约定俗成的东西,当系统看到这玩意的时候,就会觉得你这个文件是UTF-8编码的. 如果你的接口是UTF-8的,你需要强制下载一个文件,
js固定DIV高度,超出部分自动添加滚动条的简单方法

复制代码代码如下: function setheight() { var div=document.getElementById("event_basicInfo"); //div.style.width="40%"; div.style.height=400; div.style.overflow="auto"; } window.onload=setheight;
Bootstrap实现可折叠分组侧边导航菜单

效果图: 源码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

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

相关推荐

随机推荐