先创建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. node在Web中的用途

    1.网站后台: user browser ——> application server(node开发的application,处理用户的所有请求和给用户的响应) 2.分发数据请求,渲染HTML: ...

  2. normalization(统计)

    In statistics and applications of statistics, normalization can have a range of meanings.[1] In the ...

  3. CTF—攻防练习之FTP服务后门

    主机:192.168.32.152 靶机:192.168.32.156 首先查看靶机开放的端口: nmap 192.168.32.156 nmap  -T4 -A -v 192.168.32.156 ...

  4. c++ STL 【更新...】

    STL STL(标准模板库)是一套功能强大的 C++ 模板类,提供了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构 核心包括以下三个组件: 容器(Containers) 容 ...

  5. cocos2dx[3.2](6) 节点类Node

    与2.x相比,节点类Node的属性和功能做了大幅度的修改与增加. Node类是绝大部分类的父类(并不是所有的类,例如Director类是直接继承Ref类的),如Scene.Layer.Sprite以及 ...

  6. 【嵌入式开发】Raspberry Pi 树莓派性能测试

    Raspberry Pi 树莓派性能测试 目录: CPU Linpack基准测试 源码 编译/运行 结果 Whetstone/Dhrystone综合基准测试 源码 编译/运行 结果 OpenSSL安全 ...

  7. Studio 3T 破解教程

    亲测可用 ,且小编一直在使用 1.创建文件studio3t.bat 并将下面这段内容复制 @echo off ECHO 重置Studio 3T的使用日期...... FOR /f "toke ...

  8. c语言l博客作业04

    这作业属于那个课程 c语言程序设计ll 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/9772 我在这个课程的目标 ...

  9. HDU 1171 Big Event in HDU (动态规划、01背包)

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  10. wode.

    http://www.cnblogs.com/wilber2013/p/4638967.html