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 ...
随机推荐
- Kotlin 的 @JvmStatic 和 @JvmField 注解
这是关于 Java 静态方法和静态变量的一段代码: public class TestStatic { private int otherField = 0; public static final ...
- RTX修改标题logo方法
摘要: 打开“腾讯通RTX管理器”→“配置向导”→“服务运行状态”→“停止所有服务”,退出“腾讯通RTX管理器”按照如下操作.①修改到期时间为:9999-12-300:0:0 用记事本打开“C:/Pr ...
- Ubuntu基础设定:openssh-server安装和使用
记录一下Ubuntu17.10的openssh-server的安装和使用.安装之后就可以使用ssh登陆Ubuntu了,所以是Ubuntu的基础设定之一. 事前准备 Ubuntu版本:17.10 dev ...
- cocos2dx基础篇(28) 布景层Layer的三个子类
[3.x] (1)去掉 "CC" [CCLayerColor] 颜色布景层CCLayerColor有两个父类:CCLayerRGBA.CCBlendProtocol.相信有 ...
- [Vuejs] Vue解决代理设置导致浏览器Session丢失的问题
以下是会造成Session丢失的代理: proxyTable: { '/proxyApi': { target: 'http://111.18.149.215:8080/WRSOCXSystem/ht ...
- 利用Ansible模块copy和fetch进行主机间文件的传递
场景: java应用程序和Ansible不在同一台机子,要读取的文件又在另一台主机. 主机a不能保存文件,可以临时保存. 文件都在主机b上保存. 需求: 需要将文件从主机c传到主机b,再从主机b传到主 ...
- Linux c实现一个tcp文件服务器和客户端
总体需求:编写tcp文件服务器和客户端.客户端可以上传和下载文件. ================================================ 分解需求 客户端功能描述: 1)要 ...
- qt 两种按钮点击事件应用
1.传统connect 例如: connect(ui->findPushBtn,SIGNAL(clicked()),this,SLOT(find())); 参数1:事件UI 参数2:点击系统函数 ...
- Spring MVC 中使用AOP 进行统一日志管理--注解实现
1.AOP简介 AOP称为面向切面编程 AOP的基本概念 (1)Aspect(切面):通常是一个类,里面可以定义切入点和通知 (2)JointPoint(连接点):程序执行过程中明确的点,一般是方法的 ...
- [转帖]站点部署,IIS配置优化指南
站点部署,IIS配置优化指南 https://www.cnblogs.com/heyuquan/p/deploy-iis-set-performance-guide.html 挺值得学习的 毕竟之前很 ...