先创建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. jenkins 配置 gitlab webhook 实现自动发布

    测试环境需要git提交代码后,Jenkins自动部署,需要gitlab配置project webhook. 1,Jenkins版本2.89  gitlab 8.11 2,Jenkins需要安装插件:G ...

  2. 【FICO系列】SAP FICO折旧记账时出现错误:没有找到与所做选择一致的数据

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FICO折旧记账时出现错 ...

  3. 【Python开发】【神经网络与深度学习】网络爬虫之python实现

    一.网络爬虫的定义 网络爬虫,即Web Spider,是一个很形象的名字. 把互联网比喻成一个蜘蛛网,那么Spider就是在网上爬来爬去的蜘蛛. 网络蜘蛛是通过网页的链接地址来寻找网页的. 从网站某一 ...

  4. Win10成功安装IIS后浏览器打开localhost正确显示的页面

  5. python 并发编程目录

    操作系统介绍 操作系统发展史 进程理论 多进程 多线程 协程 io模型

  6. 读取CSV文件存入map中(C++)

    自己平时操作文件用的不多,今天小伙伴让帮忙写一下这个,顺便记一下.实现功能:从"翻译.csv"文件中读取出字符串,以","作为分隔符,将每一行对应存入map中. ...

  7. py之包和日志

    第一章 包 只要文件夹下含有__init__.py文件就是一个包 回想一下,之前我们没有学习模块的时候将一个整体的功能写入到文件中,为了能够充分的将某个功能进行重用 我们使用了模块,但是慢慢的模块就会 ...

  8. RabbitMQ入门教程(十一):消息属性Properties

    原文:RabbitMQ入门教程(十一):消息属性Properties 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://b ...

  9. Android判断是debug还是release模式

    1.当有些功能不希望在release模式实现时,但是debug模式又需要的时候,就可以对当前版本模式进行判断.如是debug模式则日志输出级别设置为Level.DEBUG,release模式设置为Le ...

  10. EC元素

    '''判断title是否是一致,返回布尔值'''WebDriverWait(driver,10,0.1).until(EC.title_is("title_text")) '''判 ...