点击后页面跳转到了新的链接,找到所有的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. spring boot入门学习---热部署

    1.maven文件 2.application.properties文件配置

  2. ABAP编辑器输入中文变成问号

    在ABAP编辑器里输入汉字,点击空格后显示问号? 中英文环境下编辑都出现乱码 实用程序->设置 ->基于文本的编辑器 如果用老式编辑器,可以输入中文  试试打个补丁 GUI740 补丁17 ...

  3. pycurl模块

    pycurl的使用 pycurl是curl的一个python版本. pycurl的使用说明: pycurl的使用主要是一些参数的设定. 1,c.setopt(pycurl.URL,myurl) 设定链 ...

  4. Docker - 在CentOS7中安装Docker

    在CentOS 7中安装Docker 1-确认系统信息 # cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) # uname - ...

  5. SQLAlchemy相关文档

    目录 参考文档 一.执行原生SQL语句 1.实例一 2.实例二 2.实例三 二.ORM操作 1.创建数据库表 (1)创建单表 (2)创建多个表并包含FK.M2M关系 2.操作数据库表 (1)基于sco ...

  6. 统一建模语言UML

    目录 1. UML定义 2. UML结构 2.1 视图(View) 2.2 图(Diagram) 2.3 模型元素(Model element) 2.4 通用机制(General mechanism) ...

  7. Turbine聚合https微服务

  8. apache-phoenix-5.0.0-HBase-2.0-bin 登陆报错

    1.Error: org.apache.hadoop.hbase.DoNotRetryIOException: java.io.IOException: Unable to load configur ...

  9. Lnamp的高级网站架构+动静分离+反向代理

    Lnamp的架构 环境: 图上面是5台服务器 192.168.1.116 是nginx负载均衡+动静分离 192.168.1.117:linux+apache+php 192.168.1.118:li ...

  10. ELK实战搭建+x-pack安全认证

    阅读目录: ELK日志平台入门简介1.1   ELK原理拓扑图1.2   Elasticsearch安装配置1.3   Kibana安装配置1.4   Kibana汉化及时区修改1.5   Logst ...