先创建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. runoob_Java 序列化

    Java 序列化 Java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据.有关对象的类型的信息和存储在对象中数据的类型. 将序列化对象写入文件之后 ...

  2. win server2012r2上发布网站常见错误 "HTTP 错误 500.19 请求的页面的相关配置数据无效" 解决办法

    HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效. 问题“详细错误信息模块 IIS Web Core通知 BeginReque ...

  3. AJAX中同步和异步的区别和使用场景

    一.简介Ajax请求最重要的问题是代码执行的顺序.最长遇到的问题是,我们定义一个变量接收ajax异步请求的返回结果,后续代码使用,然而后续代码在使用时该变量为初始值,始终得不到想要的结果!!!二.示例 ...

  4. cocos2dx[3.2](7) 核心类Director/Scene/Layer/Sprite

    [核心类] 导演Director.场景Scene.布景层Layer.精灵Sprite的概念请移步: cocos2dx基础篇(2) 第一个程序 导演控制场景,场景控制图层,图层控制精灵,精灵控制动作. ...

  5. 【VS开发】文件夹和文件选择EditBrowe控件使用

    让EditBrowse控件既能浏览文件,又能浏览文件夹... 下图是在http://www.codeproject.com/Articles/35722/MFC-Feature-Pack-CMFCEd ...

  6. python 正则sub的使用

     self.content = re.sub(r'>|<',lambda x: '&gt' if x.group()[0] == '>' else '&lt' , s ...

  7. Java类初始化和实例初始化过程

    1.类初始化过程 一个类要创建实例需要先加载并初始化该类 main方法所在的类需要先加载和初始化 一个子类要初始化需要先初始化父类 一个类初始化就是执行<client>()方法(编译器生成 ...

  8. Java四类八项基本数据类型

    一. 四类八项基本数据类型 1. 整数类型(byte.short.int.long) 三点注意事项: a. Java各整数类型有固定的表示范围和字段长度,其不收操作系统的影响,以保持Java的可移植性 ...

  9. 单节点FastDFS安装

    环境:centos7 1.什么是分布式文件系统 分布式文件系统(Distributed File System)是指文件系统管理的物理存储资源不一定直接连接在本地节点上,而是通过计算机网络与节点相连. ...

  10. Tomcat 调优的技巧 (转)

    描述 最近在补充自己的短板,刚好整理到Tomcat调优这块,基本上面试必问,于是就花了点时间去搜集一下tomcat调优都调了些什么,先记录一下调优手段,更多详细的原理和实现以后用到时候再来补充记录,下 ...