先创建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. 什么是token?你是怎么理解token?

    1.Token的引入: Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生. 2. ...

  2. 2D轮播图

    目录结构 index.html <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  3. 意想不到的JavaScript(每日一题3)

    题目: 答案: 1 4 3 2 解析:

  4. ps和top进程监控

    一.名词解释 1.什么是进程(what is process)? 答:进程是程序运行的过程,伴有动态,生命和运行状态.(组成:1.已分配内存的地址空间  2.安全属性,包括所有权凭据和特权  3.程序 ...

  5. C++ 多文件编译简述:头文件、链接性、声明与定义

    目录 Commen Sense 头文件 链接性 static 与链接性控制 extern 与外部链接性 Reference Commen Sense C++ 在编译时对每个翻译单元(Translati ...

  6. kali安装redis

    下载 wget http://download.redis.io/releases/redis-4.0.11.tar.gz 解压 tar -zxvf redis-4.0.11.tar.gz 切换目录 ...

  7. USACO2.2 Preface Numbering【思维+打表】

    这道题乍一看没有什么思路,细看还是没有什么思路 嗯,细看还是可以看出些什么端倪. 不能复合嵌套什么的 总结一下就只有这样3种规则: 1.IXCM最多三个同样连续 加起来2.递减:加起来 注意VLD不连 ...

  8. 【VS开发】动态添加的ActiveX控件如何响应事件

    http://blog.csdn.net/xiaoqiqixiao/article/details/574542 今天在csdn上看到一朋友问如何响应动态添加的控件的事件,搜索资料,发现对于一般的应用 ...

  9. 关于Docx动态控制word模板文件的数据

    博客:https://www.cnblogs.com/24klr/ github: https://github.com/luoruiemail/Dynamic_Word_Web 参考资料:https ...

  10. amoeba 实现读写分离(借鉴)

    1.准备三台服务器 我的是centos7版本的 做MySQL的主从状态 可以参考 https://www.cnblogs.com/chenxiaodou/articles/11993283.html ...