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 ...
随机推荐
- debian 10 "Buster"正式发布了
Debian Buster将从内核4.9.0.3升级到4.19.0-4.
- ubuntu分区建议总结
本文为转载别人的内容,结合了其他内容,进行分区的总结.其中主要是分区表格,对于ubuntu安装时,进行分区非常有用. 无论是安装Windows还是Linux操作系统,硬盘分区都是整个系统安装过程中最为 ...
- kali安装redis
下载 wget http://download.redis.io/releases/redis-4.0.11.tar.gz 解压 tar -zxvf redis-4.0.11.tar.gz 切换目录 ...
- TCP listener
调试时未关闭之前开启的TCP SERVER: 应该关闭: TcpListener TcpClient 1.开启TCP listener (1)Start()方法失败 异常位置:该异常的产生位置为 tc ...
- MySQL-4- 索引及执行计划
1. 索引作用 提供了类似于书中目录的作用,目的是为了优化查询 2. 索引的种类(算法) B树索引 Hash索引 R树 Full text GIS 3. B树 基于不同的查找算法分类介绍 B-tr ...
- 项目中使用vue的API。 和项目的结构
<template> <!--组件的 结构--> <div id="app"> <h3>{{ msg }}</h3> & ...
- MyBatis一级缓存的笔记及记录
精髓内容来源于<图灵学院> 一.概述: 一级缓存是MyBatis天然自带的,是默认开启且没有关闭的地方,1级缓存只能作用于查询回话中,所以也叫会话缓存: 这里举个例子: 订单表存在一对多的 ...
- qDebug的用法
qDebug用于在控制台输出调试信息,主要有以下几种用法. 1.类似c++的cout函数 QString str="world"; qDebug()<<"he ...
- PythonDay12
day12内置_函数 今日内容 生成器 推导式 内置函数一 生成器 什么是生成器?生成器的本质就是一个迭代器 迭代器是python自带的 生成器是程序员自己写的一种迭代器 生成器编写方式: 1.基于函 ...
- 别人的Linux私房菜(24-25)X Window设置介绍、Linux内核编译与管理
X Window主要组件为:X Server .X Client . Window Manager . Display Manager. X Server管理硬件,X Client则为应用程序,将所需 ...