代码思路:

页面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. java核心机制

    Java中有两种核心机制:Java虚拟机(Java Virtual Machine).垃圾收集机制(Garbage collection) 一.核心机制之Java虚拟机 ① Java虚拟机可以理解成一 ...

  2. Oozie时出现Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure？

    不多说,直接上干货! 问题详情 [hadoop@bigdatamaster oozie--cdh5.5.4]$ bin/ooziedb.sh create -sqlfile oozie.sql -ru ...

  3. hdu_5964:平行四边形

    打重现赛时,一点思路也没有,然后又看到这题AC数那么少,就直接放弃了.今天重新看了看,借鉴了下别人的,发现此题应该算是一道可解题. 看上去,这题的ans是同时有两个点作为自变量的函数(然而n^2复杂度 ...

  4. （转）java 多线程 CountDownLatch用法

    CountDownLatch,一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 主要方法 public CountDownLatch(int count); pu ...

  5. （转）Centos7 Nginx安装

    场景:工作中使用的suse,因为系统可可查资料太少,且系统中一些功能的确实,导致很多集群中功能无法顺利测试通过,在Centos上面进行测试,能够更快的熟悉项目的架构过程! 1 安装准备 首先由于ngi ...

  6. win10安装sqlserver2016准备

    win10安装sql server2016需要注意: 一.下载jdk-8u121-windows-x64.exe这个安装,这个检测不通过会影响安装 二.把万维网服务的这个去掉,这个影响数据库实例的创建 ...

  7. MySQL学习笔记(三)：常用函数

    一:字符串函数 需要注意的几个细节: 1.cancat中有一个字符串为null,则结果为null. 2.left(str,x) 和 right(str,x)中x为null,则不返回任何字符串,不是nu ...

  8. 基于脚本的modelsim自动化仿真笔记

    这里记录一下基于脚本的modelsim自动化仿真的一些知识和模板,以后忘记了可以到这里查找.转载请标明出处:http://www.cnblogs.com/IClearner/ . 一.基本介绍 这里介 ...

  9. 使用 Router 实现的模块化，如何优雅的回到主页面

    使用 Router 实现的模块化,如何优雅的回到主页面 版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 未经允许,不得转载. 一.前言 现在越来越多的 App ...

  10. 特殊的ip地址

    特殊IP地址 一.0.0.0.0 严格说来,0.0.0.0已经不是一个真正意义上的IP地址了.它表示的是这样一个集合:所有不清楚的主机和目的网络.这里的“不清楚”是指在本机的路由表里没有特定条目指明如 ...