代码思路:

页面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. 真实记录我入门学习Linux系统的经历

    我本身来说并不是计算机专业的学生,因此今天来谈及这个话题,对大家来说,有了更多的客观公正性.对我而言,linux给我最大的财富,并不是编程能力提高了多少,而是视野的开阔.心态的转变和自学能力的提高.我 ...

  2. 20170717_python_爬虫_网页数据解析_BeautifulSoup_数据保存_pymysql

    上午废了老大劲成功登陆后,下午看了下BeautifulSoup和pymysql,晚上记录一下 自己电脑装的sublime,字体颜色竟然拷贝不下来 - - 写的过程中遇到了很多问题: 1.模拟登陆部分 ...

  3. 51nod_1120:机器人走方格 V3

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1120 Catalan数 基础题,ans=C(2n-2,n-2 ...

  4. win7 远程桌面连接过程

    背景:在公司日常工作中经常需要是用到远程桌面的连接,在内网环境下,远程桌面连接比qq更加方便!可以考虑外网的连接. 1 准备工作 这里我实验的另一台机器的ip:168.33.51.198,本机ip:1 ...

  5. 【SignalR学习系列】4. SignalR广播程序

    创建项目 创建一个空的 Web 项目,并在 Nuget 里面添加 SignalR,jQuery UI 包,添加以后项目里包含了 jQuery,jQuery.UI ,和 SignalR 的脚本. 服务端 ...

  6. Java中的Json序列化，不容忽视的getter

    在开发的过程中,经常会碰到和自己预期不一样的情况.有的时候自己去研究一下还是很有趣的.这两天在写java web的时候,碰到了一个对象序列化的问题. 问题重现 public class AjaxJso ...

  7. JavaSE（七）之内部类

    上一篇我们学习了接口还有访问控制,在以后的工作中接口是我们经常要碰到的,所以一定要多去回顾.接下来介绍一下内部类.很多时候我们创建类的对象的时候并不需要使用很多次,每次只使用一次 这个时候我们就可以使 ...

  8. Tornado-StaticFileHandler参考

    StaticFileHandler ====== tornado.web.StaticFileHandler 源代码中的解释 class StaticFileHandler(RequestHandle ...

  9. Python爬虫初学（二）—— 爬百度贴吧

    Python爬虫初学(二)-- 爬百度贴吧 昨天初步接触了爬虫,实现了爬取网络段子并逐条阅读等功能,详见Python爬虫初学(一). 今天准备对百度贴吧下手了,嘿嘿.依然是跟着这个博客学习的,这次仿照 ...

  10. Maven的下载和安装

    1. Maven作用: 管理项目和jar包 2. jdk环境要求: maven3.3+需要jdk1.7以上的版本 3. 下载地址: http://maven.apache.org/download.c ...