点击后页面跳转到了新的链接,找到所有的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. HTML5 地理位置定位API(3)

    HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了h ...

  2. Qt编写自定义控件49-飞机仪表盘

    一.前言 飞行仪表是测定和表示飞机数据的工具,飞机中必不可少的一部分,飞行员根据飞行仪表表示的数据才能正确地做出判断.一般飞机仪表包括高度表+空速表+垂直速率表+姿态仪+航向指示表+转弯协调表. 这次 ...

  3. [AI] 深度数学 - Bayes

    数学似宇宙,韭菜只关心其中实用的部分. scikit-learn (sklearn) 官方文档中文版 scikit-learn Machine Learning in Python 一个新颖的onli ...

  4. Java API操作Hadoop可能会遇到的问题以及解决办法

    https://www.zifangsky.cn/1292.html Could not locate Hadoop executable: xxx\bin\winutils.exe   1 2 3 ...

  5. [逻辑学]意外绞刑悖论(Hangman paradox)(又称意外考试悖论)

    绞刑 在审讯中一位囚徒被法官判处死刑.判决如下:“你下周将会被处决,但哪天处决对你来说是一个惊喜.”囚徒因此作出如下推理:“假如处决日是周日,那么在周六夜晚降临后,我将提前知道我周日会被处决,那样的话 ...

  6. SQL 创建表

    SQL 创建表是通过SQL CREATE TABLE 语句来实现,该语句是DDL SQL语句.CREATE TABLE语句用于创建用于存储数据的表.在创建表时,可以为列定义主键.惟一键和外键等完整性约 ...

  7. 【转载】49个CSS知识点

    01.[负边距]

  8. leetCode:reverseInteger 反向整数 【JAVA实现】

    反向整数 给定一个 32 位有符号整数,将整数中的数字进行反转,如果超出整数的最大或者最小范围返回0 更多文章查看个人博客 个人博客地址:反向整数 方法一 利用StringBuilder的revers ...

  9. 龙芯PG10 安装uuid-ossp 的方法 复用瀚高数据库的 so文件

    接着上一篇blog  当时在中标麒麟 龙芯上面安装了postgresql10.10 的版本 但是没搞定 uuid 当时遇到的问题: 0. 只安装postgresql数据库会报错如图示: 我验证了下 安 ...

  10. kibana发音 logstash发音 ElasticSearch发音 音标 翻译

    kibana [kɪbana] 剋吧那 kei ba na == 扩展 logstash [lɔɡ] [stæ:ʃ] 楼个四die吃 == ElasticSearch [ɪˈlæstɪk] [sɜːt ...