代码思路:

页面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. 用caffe一步一步实现人脸检测

    学习深度学习已有一段时间了,总想着拿它做点什么,今天终于完成了一个基于caffe的人脸检测,这篇博文将告诉你怎样通过caffe一步步实现人脸检测.本文主要参考唐宇迪老师的教程,在这里感谢老师的辛勤付出 ...

  2. BestCoder Round #92 (hdu_6015 6016)

    比赛链接 A题主要是map的使用,比赛的时候问了下队友,下次要记住了 #include<bits/stdc++.h> using namespace std; typedef long l ...

  3. luogu P3373 【模板】线段树 2

    题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含三个整数N.M.P,分别 ...

  4. MySQL系列（二）---MySQL事务

    MySql 事务 目录 MySQL系列(一):基础知识大总结 MySQL系列(二):MySQL事务 什么是事务(transaction) 保证成批操作要么完全执行,要么完全不执行,维护数据的完整性.也 ...

  5. 【LINUX】主进程、父进程、子进程、守护进程的概念

    一.摘要 详解父进程.子进程.守护进程的区别,例子稍候补充 二.定义区别 主进程 程序执行的入口,可以理解为常用的main 函数 父进程 对于子进程而言, 子进程的创造者,可有多个子进程. 任何进程都 ...

  6. juquery 中 size()和length的区别 以及优缺点

    size()是jQuery提供的函数,而length是属性(不带括号).jQuery提供的源代码是这样的:size: function() {return this.length;}其实也就是说,在j ...

  7. 蓝桥杯比赛javaB组练习《四平方和》

    四平方和 四平方和定理,又称为拉格朗日定理:每个正整数都可以表示为至多4个正整数的平方和.如果把0包括进去,就正好可以表示为4个数的平方和. 比如:5 = 0^2 + 0^2 + 1^2 + 2^27 ...

  8. C#设计模式(1)-单例模式

    单例(Singleton)模式介绍 单例模式:也可以叫单件模式,官方定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式的特点: 单例类只能有一个实例. 单例类必须自己创建自己的唯一 ...

  9. NYOJ--102--次方求模（快速求幂取模）

    次方求模 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 求a的b次方对c取余的值   输入 第一行输入一个整数n表示测试数据的组数(n<100)每组测试只有一 ...

  10. CentOS Linux 系统 英文 改中文

    CentOS Linux 系统 英文 改中文 首先,使用root用户登录Linux系统,然后进入打开终端(桌面上右键第四个选项,应该是),然后进入到etc/sysconfig目录下