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 ...
随机推荐
- 什么是 go vendor
go vendor 是golang引入管理包依赖的方式,1.5版本开始引进,1.6正式引进. 基本原理其实就是将依赖的包,特指外部包,复制到当前工程下的vendor目录下,这样go build的时候, ...
- SQL注入漏洞详解
目录 SQL注入的分类 判断是否存在SQL注入 一:Boolean盲注 二:union 注入 三:文件读写 四:报错注入 floor报错注入 ExtractValue报错注入 UpdateXml报错注 ...
- line-height 与 height 的区别
line-height是行高的意思,它决定了元素中文本内容的高度,height则是定义元素自身的高度. height:表示 行高 line-height:表示 每行文字所占的高度 举例: 第 ...
- python003
一.列表 1.列表是有序的,列表的元素可以修改# list 类li=[1,22,'ss','zp',['qqqq',111,33,['eeeeeeeee'],'ddddd',True]] #通过lis ...
- python学习之数据类型(set)
3.9 集合(set) 3.9.1 介绍 集合是一个无序且不重复的元素集合.元素必须是可哈希的(int,str,tuple,bool).可以把它看作是dic的key的集合.用{}表示. 注意: ...
- json得回顾
- 使用new关键字创建对象数组(C#,C++,Java)
今天遇到一个题目 分析下面的代码,判断代码是否有误. using System; namespace Test1 { class Point { public int x; public int y; ...
- HDU 1160 FatMouse's Speed (动态规划、最长下降子序列)
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- dp常见优化方法
noip范围内的dp优化方法: 加速状态转移 1.前缀和优化 2.单调队列优化 3.线段树或树状数组优化 精简状态 3:精简状态往往是通过对题目本身性质的分析,去省掉一些冗余的状态.相对以上三条套路性 ...
- PostgreSQL-优化之分表
分表概述 数据库分表,就是把一张表分成多张表,物理上虽然分开了,逻辑上彼此仍有联系. 分表有两种方式:水平分表,即按列分开:垂直分表,即按行分开 优势 1. 查询速度大幅提升 2. 删除数据速度更快 ...