先创建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. 第三方MBXPageViewController的使用和注意事项

    GitHub的地址: https://github.com/Moblox/MBXPageViewController 介绍SegmentController的使用: - (void)createSeg ...

  2. ssh连接报错

    1.ssh: connect to host 172.16.0.142 port 22: Connection refused 解决: 在sshd 被连接端输入: [root@ecs-01 ~]# e ...

  3. Exceptionless安装的一些坑

    零.参考网站: https://www.cnblogs.com/zgshi/p/9152196.html 博客园上介绍.基本上介绍了如何安装和放到IIS上面. https://www.cnblogs. ...

  4. cocos2dx[3.2](8) 数学类Vec2/Size/Rect

    数学类Vec2.Size.Rect,是cocos2dx中比较常用的类. 比如设置图片位置,设置图片大小,两图片的碰撞检测等等. 比起2.x版本,在3.x中本质上其实没有太大的变化,主要的变化就是将全局 ...

  5. python学习之内存驻留机制简述

    第四章 4.1 小数据池 4.1.1 代码块 一个模块,一个函数,一个类,甚至一个command命名都可以称之为一个代码块. 官方解释: A Python program is constructed ...

  6. 【VS开发】Windows上的音频采集技术

    前一段时间接到一个任务,需要采集到声卡的输出信号,以便与麦克风的输入信号进行混音. 之前一直没有研究过音频的相关技术,这次就顺便抽出一点时间去了解了一下Windows上采集音频的相关技术. 对于音频处 ...

  7. Visual Subst - 简单将任意文件夹挂载模拟成驱动器盘符硬盘分区的小工具

    随着电脑的使用,硬盘里的资料一天比一天多,也越来越杂乱.一些朋友为了方便文件管理,会考虑重新分区,让C.D.E等盘符分别担任不同的角色.不过,不分区的话也有一些小工具可以帮你实现. Visual Su ...

  8. 20191209 Linux就该这么学(5)

    5. 用户身份与文件权限 5.1 用户的身份和能力 Linux 系统的管理员之所以是 root,并不是因为它的名字叫 root,而是因为该用户的身份号码即 UID( User IDentificati ...

  9. Dubbo基础、高级讲解

    基础 https://blog.csdn.net/hardworking0323/article/category/6148466 高级 https://blog.csdn.net/hardworki ...

  10. java--编码规范易漏

    1:命名规范 类名用大驼峰式 参数变量·函数·成员变量·局部变量 小驼峰式 常亮命名全部大些单词用_隔开 抽象类用Abstract开头·异常类用Excetpion结尾·测试类用Test结尾 *POJO ...