点击后页面跳转到了新的链接,找到所有的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. python开发-实现redis中的发布订阅功能

    Python3学习(二十七):python实现Redis的订阅与发布(sub-pub机制) 先介绍一下redis的pub/sub功能: Pub/Sub功能(means Publish, Subscri ...

  2. jpeglib.h jerror.h No such file or directory 以及 SDL/SDL.h: 没有那个文件

    1. error: jpeglib.h jerror.h No such file or directory 没有那个文件或目录 jpeg.cc:19:21:error: jpeglib.h: 没有那 ...

  3. word 2010中设置默认粘贴为 只保留文本粘贴【visio也适用于快捷键方式】

    VISIO也适用如下方式: 3. 当然也可以直接是 Ctrl + Alt + V打开选择性粘贴选项卡 来选择其中某项来粘贴也是可以的 转: word 2010中设置默认粘贴为 只保留文本粘贴 2012 ...

  4. iOS UITextField设置placeholder颜色

    设置UITextField的placeholder颜色 UIColor *color = [UIColor blackColor]; textField.attributedPlaceholder = ...

  5. 浏览器最小显示12px字体的解决方法

    今天做打印标签,发现浏览器最小字体限制了12px,标签那么小,12px随便几个字就给占满了: 最后通过  transform:scale(1,0.8) 搞定: 这个属性允许将元素移动.压缩.旋转:这里 ...

  6. LeetCode_119. Pascal's Triangle II

    119. Pascal's Triangle II Easy Given a non-negative index k where k ≤ 33, return the kth index row o ...

  7. Java使用MyBatis的ScriptRunner执行SQL脚本

    脚本文件D:/test_transaction.sql: start transaction; drop table if exists testdb.test_transaction_table; ...

  8. MySQL初始化脚本mysql_install_db使用简介及选项参数

    mysql_install_db是一个默认放在.../mysql/scripts的一个初始化脚本. 该脚本可以在任何装有perl的操作系统上被使用,在5.6.8之前的版本,该脚本是一个shell脚本, ...

  9. Django_03_模板的使用

    {{ }} 变量 list类型用 'lst.索引',且不支持倒序索引,即不能识别lst.-1 dic类型用 'dic.key',去取对应的value,不支持{} 对于实例对象,通常自己重写__str_ ...

  10. ROS下gazebo打开出现问题

    通常情况下,在装完ros后,打开gazebo, 会出现无法连接服务器获取模型的情况.这样,我们打开gazebo, 终端会提示timeout,gazebo界面没有网格. 这是因为服务器网站地址好像已经换 ...