点击后页面跳转到了新的链接,找到所有的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的更多相关文章

  1. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  3. jquery 根据网站url给导航nav添加active效果

    后台的同事因为把nav公用了,所以无法单页添加active,一下方法通过判断url的后缀给当前页添加active $(function(){ var _nava= $('.nav .nav-wrapp ...

  4. bootstrap导航菜单做active判断

    先创建2个文件,index 和about,导入bootstrap的css <div class="container"> <ul class="nav ...

  5. opencart 后台导航菜单添加步骤

    1,找到在catalog\language\english\common\header.php // Text$_['text_affiliate'] = 'Affiliates';$_['text_ ...

  6. Element NavMenu动态生成导航菜单

    为了演示方便,不从数据库获取了 {     "data":[         {             "id":125,             " ...

  7. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  8. AngularJS 导航栏动态添加.active

    在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...

  9. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

随机推荐

  1. Quartz.Net 学习随手记之03 配置文件

    第一种方式:直接写入代码中 NameValueCollection properties = new NameValueCollection(); properties["quartz.sc ...

  2. 002-poi-excel-导出设置单元格数据校验规则、筛选功能

    一.数据验证概述 推荐以下操作在2007之后操作 1.1.查看excel的数据验证 1.进入 2.设置规则 通过验证条件允许,可以看到是每个单元格默认只成立一种条件 1.2.POI代码开发-数据验证 ...

  3. java获取两个日期之间的所有日期

    java获取两个日期之间的所有日期   解决方法: 1.核心方法 private List<String> getBetweenDates(String start, String end ...

  4. 使用Tomcat搭建基于域名的虚拟机

    Tomcat搭建基于域名的虚拟主机,实际就是实现了同一个Tomcat部署多个项目(网站/应用程序).端口可以使用同一个,也可以不同. (1).在tomcat的conf文件夹下存在Tomcat的配置文件 ...

  5. 关于Selenium remote模式分布式执行UI自动化测试必定面临的性能问题

    1.大部分自动化测试人员都是在本地执行UI自动化测试,也就是代码和浏览器必须在同一台机器上,这样的的缺陷很多,无法多任务并发执行UI自动化测试用例,效率极低 2.正是如此,Selenium 的remo ...

  6. videojs改变音量大小

    <audio id=example-video preload="auto" class="video-js vjs-default-skin" type ...

  7. mysql的root用户无法给普通用户授权问题处理

    1.查看Grant_priv是Y还是N 执行下面 select * from mysql.user where User='root' and Host='%'\G; 下图查看结果为Grant_pri ...

  8. Spring Boot中mybatis insert 如何获得自增id

    https://www.cnblogs.com/quan-coder/p/8728410.html 注意要显式设置主键,通过: @Options(useGeneratedKeys = true, ke ...

  9. react Link标签 火狐失效怎么解决

    这个问题其实找了好多资料都没有具体的解决方法: 今天突然想到可能是层级嵌套出问题了,刚好有个bug也是关于这个的,已经亲测解决了 代码如下:火狐和谷歌都能正常的跳转 <Link to=" ...

  10. iOS-UIAlertView与UIActionSheet

    UIAlertView与UIActionSheet 6.11.1 常规调用 UIAlertView:调出一个模态对话框,屏幕居中显示 UIActionSheet:非模态对话框,屏幕下方弹出 Alert ...