代码思路:

页面4:

页面5:

代码思路:

通过jq获取你打开页面的链接  window.location.pathname；

在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同

通过jq包含方法找到相对应的li给他加入active类名

然后。。就没有然后了。。。

jq代码：

$(function () {

    var li = $(".title_ul").children("li");

    for (var i = 0; i < li.length; i++) {

        var url = window.location.pathname;

        var url = url.replace("/", "");

        if (url.indexOf(li[i].id)!=-1) {

            li[i].firstChild.className = "active";

        } else {

            li[i].firstChild.className = "";

        }

    }

})

html代码：

<body>

<div class="title">

  <ul class="title_ul">

    <li id="index"><a href="index.html" class="">页面1</a></li>

    <li id="zf"><a href="zf.html" class="">页面2</a></li>

    <li id="gc"><a href="gc.html" class="">页面3</a></li>

    <li id="hc"><a href="hc.html" class="">页面4</a></li>

    <li id="shwt"><a href="shwt.html" class="">页面5</a></li>

  </ul>

</div>

</body>

喜欢的朋友可以去试试  ^_^  转载清注明出处！！！

jq 动态添加.active 实现导航效果的更多相关文章

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

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

  2. jq动态添加的元素触发绑定事件无效

    <div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...

  3. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  4. ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  5. js JQ动态添加div标签

    function renderList(data){ var str = ''; for(var i = 0; i < data.length; i++){ // 动态添加li str += ' ...

  6. jq动态添加onclick事件在谷歌中不起作用

    $("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...

  7. JQ 动态添加节点

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

  8. jq动态添加代码监听问题

     $(document).on('click', '.class', function() { console.log($(this).attr('id')); }); 

  9. 用jq动态给导航菜单添加active

    点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...

随机推荐

  1. WIN10下设置惠普HP1050等打印机打印颜色，只打黑白或彩色

    今天同事问了一个问题,如何在WIN10下,设置惠普打印机只打印黑白, 上网搜了下,没有找到任何信息,只有在WIN8前系统设置的内容,经过几番折腾,得出此文. WIN10下设置惠普HP1050等打印机打 ...

  2. 【canvas学习笔记一】基本认识

    <canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口). 属性 & ...

  3. Apache Flume 1.7.0 各个模块简介

    Flume简介 Apache Flume是一个分布式.可靠.高可用的日志收集系统,支持各种各样的数据来源,如http,log文件,jms,监听端口数据等等,能将这些数据源的海量日志数据进行高效收集.聚 ...

  4. [js] 小谈 export (没总结完)

    作用 导出变量/类 等等 用法 index.js 文件 export default name 仅导出一个变量 import name from './index.js' index.js 文件 ex ...

  5. easyAR图钉功能实现相关

    图钉功能总算做出来了,发现真的是因为没认真看手册导致的=.=[跪 最后的代码很简单,但是过程中看了不少camera/tracker相关的东西,感觉需要整理记录一下 图钉功能记录: 目标:实现用ARCa ...

  6. Python的time和datetime模块

    Python的time和datetime模块 time 常用的有time.time()和time.sleep()函数. import time print(time.time()) 149930555 ...

  7. 24. leetcode 409. Longest Palindrome

    409. Longest Palindrome Given a string which consists of lowercase or uppercase letters, find the le ...

  8. POJ 2393 Yogurt factory 贪心

    Description The cows have purchased a yogurt factory that makes world-famous Yucky Yogurt. Over the ...

  9. Oracle RAC 实验环境RMAN备份v1.01

    Oracle RAC 实验环境RMAN备份v1.01 环境:RHEL 6.5 + Oracle GI 11.2.0.4 + RAC 11.2.0.4 (2 nodes) 需求:制定RAMN备份策略 版 ...

  10. DHCP服务的部署和配置

    DHCP介绍: DHCP(动态主机配置协议)是一个局域网网络协议,使用UDP协议工作,主要用途:给局域网络或网络服务供应商自动分配IP地址, DHCP有3个端口,其中UDP67和UDP68为正常的DH ...