先创建2个文件,index 和about,导入bootstrap的css

  <div class="container">
<ul class="nav nav-pills">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<h1>Home Page</h1>
</div>

然后导入jquery,不导入也行,原始JS写法

 $('.nav-pills').find('a').each(function () {
if (this.href == document.location.href || document.location.href.search(this.href) >= 0) {
$(this).parent().addClass('active'); // this.className = 'active';
}
});

这样点击不同的导航,就可以自动添加active了。

就这么简单的JS代码,网上找了好久都不是想要的,最后还是自己修改的。

bootstrap导航菜单做active判断的更多相关文章

  1. bootstrap导航菜单,手机和PC端

    源代码 <!DOCTYPE html> <html> <head lang="en"> <meta name="viewport ...

  2. 用jq动态给导航菜单添加active

    点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...

  3. bootstrap导航菜单

    <!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...

  4. Angular+Bootstrap3导航菜单

    Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...

  5. BootStrap学习(3)_导航菜单

    一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...

  6. Bootstrap学习-菜单-按钮-导航

    1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...

  7. 前端框架bootstrap 表单和导航菜单的 Demo(第二篇)

    表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  8. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  9. Bootstrap -- 下拉菜单、输入框组、导航菜单

    Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...

随机推荐

  1. java:常用类(包装类,equals和==的比较,Date,java.lang.String中常用方法,枚举enum)

    *包装类: 将基本类型封装成类,其中包含属性和方法以方便对象操作. *byte---->Byte *short--->Short *long--->Long *float---> ...

  2. java高斯消元模板

    //package fuc; import java.io.PrintStream; import java.math.BigInteger; import java.util.Scanner; pu ...

  3. Java重写祖先类方法equals示例

    Java中很重要的一个知识点就是所有类都默认继承Object类,所以创建的每一个类都继承了Object的方法,所有类都可以向上转型为Object类对象,当然可以重写Object里面的常用方法,有时候重 ...

  4. 【VS开发】【智能语音处理】解读男女声音的区别:亮度,糙度

    1. 男女声音的本质不同:音高不同 这是废话,地球人都知道.都说女声比男声高八度,其实不能,高4-6度差不多. 2. 男女声音的不同:亮度 从直观上这个很好理解,女声普遍更"亮", ...

  5. 【转帖】国产x86处理器KX-6000发布

    国产最先进x86处理器KX-6000发布:8核3.0GHz 力压酷睿i5处理器 https://www.cnbeta.com/articles/tech/858981.htm 全网所有的网页都写错了 ...

  6. gdb笔记 ---《Linux.C编程一站式学习》

    gdb笔记 ---<Linux.C编程一站式学习> 单步执行和跟踪函数调用 函数调试实例 #include <stdio.h> int add_range(int low, i ...

  7. centos7下安装composer和git

    一.安装composer composer 属于php的包依赖管理工具. 1.进入Composer国内镜像网站文档页查看安装方法: https://docs.phpcomposer.com/00-in ...

  8. python-day16(正式学习)

    目录 模块 什么是模块? 模块的四种形式 为什么要用模块 如何用模块 import from...import... 异同 循环导入问题 解决方案 1. 2. 模块搜索路径 random模块 模块 什 ...

  9. P1397 [NOI2013]矩阵游戏

    传送门 首先显然可以矩乘快速幂然后 $T$ 飞 看一眼题解发现因为这一题矩阵的特殊性所以可以对矩阵的次数欧拉降幂 然而我并不懂证明,所以我选择暴力乱搞的做法 十进制快速幂,然后注意一下常数,还有矩阵乘 ...

  10. zk ui安装 (选装,页面查看zk的数据)

    # 使用WEB UI查看监控集群-zk ui安装 cd /usr/local git clone https://github.com/DeemOpen/zkui.git yum install -y ...