用jq动态给导航菜单添加active
点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消。
<ul class="ul">
<li>
<a class="active" href="/" title="cad首页">首页</a>
</li>
<li>
<a href="/pc/legalcad" title="CAD正版化">产品</a>
</li>
<li>
<a href="/pc/QandA" title="CAD问答">问答</a>
</li>
<li>
<a href="/pc/course" title="CAD教程">教程</a>
</li>
<li>
<a href="/pc/softdownload" title="CAD下载">下载</a>
</li>
<li>
<a href="/pc/buy" title="cad购买">购买</a>
</li>
<li><a href="http://www.caxa.com/forum/" title='咖迷社区' target="_blank">社区</a></li>
</ul>
.ul {display:flex;width:500px;}
.ul li{height:78px;line-height:78px;padding:0 15px;}
.ul li a{font-size:18px;color:#fff;}
.ul li a:hover,.header .ul li a.active{color:#00f6ff;cursor:pointer;}
$(function () {
$(".ul").find("a").each(function () {var a = $(this)[0];
if ($(a).attr("href") === location.pathname) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
})
用jq动态给导航菜单添加active的更多相关文章
- jQuery ui背景色动态渐变导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
- jquery 根据网站url给导航nav添加active效果
后台的同事因为把nav公用了,所以无法单页添加active,一下方法通过判断url的后缀给当前页添加active $(function(){ var _nava= $('.nav .nav-wrapp ...
- bootstrap导航菜单做active判断
先创建2个文件,index 和about,导入bootstrap的css <div class="container"> <ul class="nav ...
- opencart 后台导航菜单添加步骤
1,找到在catalog\language\english\common\header.php // Text$_['text_affiliate'] = 'Affiliates';$_['text_ ...
- Element NavMenu动态生成导航菜单
为了演示方便,不从数据库获取了 { "data":[ { "id":125, " ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- AngularJS 导航栏动态添加.active
在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
随机推荐
- HTML5 地理位置定位API(1)
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- js实现两个文本框数值的加减乘除运算
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- php 获得访问者的IP
<?php $user_IP = ($_SERVER["HTTP_VIA"]) ? $_SERVER["HTTP_X_FORWARDED_FOR"] : ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_14-课程预览功能开发-CMS添加页面接口
5.3 CMS添加页面接口 cms服务对外提供添加页面接口,实现:如果不存在页面则添加,否则就更新页面信息. 此接口由课程管理服务在课程预览时调用. 接口方法.:页面没有就添加.有了更新数据 之前的接 ...
- DELPHI中 screen.Cursor:=crhourglass; adoQuery.close; adoquery.Open; screen.Cursor:=crdefault;啥意思
鼠标忙这段代码大概是用来演示鼠标的用法的.具体解释如下: 使鼠标指针为沙漏状.(以表示程序正忙)screen.Cursor:=crhourglass; 把(打开的)数据库关闭.adoQuery.clo ...
- django模板---过滤器
过滤器 通过django的过滤器可以在无须编码的情况下完成一些基本工作,比如字母的大小写转换.日期转换.获取字符串的长度.过滤器要放到标签的标识符后面,中间用竖杠(|)分隔, 如下面的过滤器把name ...
- ElasticSearch文档删除字段
https://www.cnblogs.com/ljhdo/archive/2017/03/24/4885796.html
- 下载Hadoop环境的虚拟机文件
使用的是hortonworks的hadoop环境, 下载地址:https://hortonworks.com/downloads/#
- 【VS开发】fatal error C1001:编译器中发生内部错误
自己编译boost的库文件时遇到这个错误的,大概报错情况如下: mp_defer.hpp<50>:fatal error C1001:编译器中发生内部错误. 1> 要解决此问题, ...
- SQLSever--基础学习--创建登录用户&创建数据库用户&分配权限
如题,本文简记一下SQL Sever里面登录用户(login)的创建,数据库用户(DBUser)的创建,以及给数据库用户分配权限(Grant). 数据库有三层保护机制: 第一层:登录用户以及登录密码的 ...