bootstrap导航菜单做active判断
先创建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判断的更多相关文章
- bootstrap导航菜单,手机和PC端
源代码 <!DOCTYPE html> <html> <head lang="en"> <meta name="viewport ...
- 用jq动态给导航菜单添加active
点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...
- bootstrap导航菜单
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...
- Angular+Bootstrap3导航菜单
Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...
- BootStrap学习(3)_导航菜单
一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...
- Bootstrap学习-菜单-按钮-导航
1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...
- 前端框架bootstrap 表单和导航菜单的 Demo(第二篇)
表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap -- 下拉菜单、输入框组、导航菜单
Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...
随机推荐
- FileChannel原理
官方对Channel的解释 (一个用于输入/输出操作的连接.通道表示对实体的开放连接,如硬件设备.文件.网络套接字或能够执行一个或多个不同的输入/输出操作的程序组件,例如读取或写入.) Thankin ...
- mac book 显示隐藏系统文件夹
打开Finder Finder->Finder Preferences->勾选 Device分类下的MAC username 在Teminal下输入命令 defaults write co ...
- canvas基础知识
canvas基础知识 ## CanvasDOM对象 #### 获取绘图环境```canvas.getContext();``` #### 设置宽和高```canvas.width = 500;canv ...
- body标签中的相关标签
一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...
- 网格UV展开
原文链接 UV展开是什么 参数曲面的参数域变量一般用UV字母来表达,比如参数曲面F(u,v).所以一般叫的三维曲面本质上是二维的,它所嵌入的空间是三维的.凡是能通过F(u,v)来表达的曲面都是参数曲面 ...
- NOIp D1T1 小凯的疑惑
吐槽 果然让人很疑惑,这道题,对于我这种数学渣渣来说太不友好了,哪里想得到结论,猜也猜不到. 思路一 纯数学,见过的飞快切掉,没见过的就... 结论就是:已知$a,b$为大于$ 1 $的互质的正整数, ...
- 【Python开发】【神经网络与深度学习】网络爬虫之python实现
一.网络爬虫的定义 网络爬虫,即Web Spider,是一个很形象的名字. 把互联网比喻成一个蜘蛛网,那么Spider就是在网上爬来爬去的蜘蛛. 网络蜘蛛是通过网页的链接地址来寻找网页的. 从网站某一 ...
- [转帖]linux文件描述符文件/etc/security/limits.conf
linux文件描述符文件/etc/security/limits.conf https://blog.csdn.net/fanren224/article/details/79971359 需要多学习 ...
- Java第四周总结报告
本周做了什么? 学习了Java的面向对象知识,包括对类,对象,抽象的理解 下周准备做什么? 学习Java面向对象的有关知识,包括对象与类,继承关系等内容 代码联系时间五个小时,看书四个小时. 本周遇到 ...
- [JavaScript] es6规则总结
let 和 const let 是块级作用域 let 声明的变量只在其所在的作用域内生效 <script> { var today = "周3"; let yester ...