用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 ...
随机推荐
- 阶段5 3.微服务项目【学成在线】_day06 页面发布 课程管理_20-课程计划添加-前端页面调试
调试课程计划的添加功能 课程添加的弹窗使用的是dialog组件 这个变量控制对话框是否显示 当点击按钮的时候就设置为true.那么弹窗就会显示出来了 测试 在测试的节点下面添加一个子节点 添加成功后 ...
- QML之信号与槽
一.C++的信号和QML的槽 前言: Qt中的信号与槽,通常是一个信号SIGNAL和一个槽SLOT,通过connet连接,而QML中不需要再写槽函数,只需要在合适的地方告诉QML:如果x信号产生则执行 ...
- django中的多级评论
需求分析 一般论坛中有评论和子评论,这样很容易就成了一个评论树,比如以下情况,先看数据结构: #nid,评论内容,跟帖对象(None为根评论) (1, '111', None), (2, '222', ...
- Intellij-编码设置
目录 文件编码修改 @(目录) 文件编码修改 • 上图标注 1 所示,IDE 的编码默认是 UTF-8 , Project Encoding 虽然默认是 GBK ,但是一般都建议 修改为 UTF-8 ...
- 完全解读 margin 标签
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
- 浅出讲解:php的socket通信
原文地址:https://www.cnblogs.com/aipiaoborensheng/p/6708963.html 对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发 ...
- 【MM系列】SAP 采购订单收货后不能修改价格的增强
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 采购订单收货后不能修改价格的 ...
- iCMSv7.0.15后台database.admincp文件仍存在SQL注入漏洞
闲着无聊,国庆时间没事做,又在Q群看到这种公告,只好下个icms慢慢玩.(PS:医院和学校居然都关网站了) 无奈自己太菜,审不出问题.只好上网百度icms之前的漏洞.然后居然成功在iCMSv7.0.1 ...
- Spring 使用日期类型
1. 数据层数据类型依赖包 java.time.LocalDate 2.pom.xml添加依赖 <dependency> <groupId>org.thymeleaf.ext ...
- MakeFile文件是什么——内容、工作原理、作用、使用
MakeFile文件是什么?它里面包含什么内容.具有什么作用.怎么使用?下面就来具体说说. 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你 ...