用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 ...
随机推荐
- MySQL批量导入Excel、txt数据
MySQL批量导入Excel.txt数据 我想Excel是当今最大众化的批量数据管理软件了吧,所以我们会经常涉及到将Excel中数据导入到MySQL中的工作.网上有一些关于直接将Excel导入MySQ ...
- mysql查看被锁住的表
转: mysql查看被锁住的表 2019年05月14日 11:58:59 hlvy 阅读数 1068更多 分类专栏: mysql mysql 转:https://blog.51cto.com/mo ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_05-SpringSecurityOauth2研究-搭建认证服务器
3 Spring Security Oauth2研究 3.1 目标 本项目认证服务基于Spring Security Oauth2进行构建,并在其基础上作了一些扩展,采用JWT令牌机制,并自定 义了用 ...
- Python2和Python3的字符串编码和类型
一.字符串编码和类型 任何编码格式的字符串,都可以和Unicode互相转换. gbk -> utf8 # 将字符串按指定格式进行解码,返回Unicode字符串unicode_str = gbk_ ...
- [Feature] Feature selection - Embedded topic
基于惩罚项的特征选择法 一.直接对特征筛选 Ref: 1.13.4. 使用SelectFromModel选择特征(Feature selection using SelectFromModel) 通过 ...
- HmacSHA256算法(C# 和 Java)
Java代码: /** * HmacSHA256算法,返回的结果始终是32位 * @param key 加密的键,可以是任何数据 * @param content 待加密的内容 * @return 加 ...
- html设置多个div并排显示
我这里以4个div为例,html代码如下: <body> <div id="column1" style="background-color: blue ...
- 【Leetcode_easy】771. Jewels and Stones
problem 771. Jewels and Stones solution1: class Solution { public: int numJewelsInStones(string J, s ...
- [c++]struct timeval
struct timeval { time_t tv_sec; // seconds long tv_usec; // microseconds }; re 1. struct timespec 和 ...
- C#数字除法
C#中计算double a=1/1000:应该结果是0.001,但为什么会变成0呢? C# 中 如果相除的两个数都是整数(int 型) 那么除的结果就是只取整数部分 所以你才会取到0 如果你要取精确的 ...