代码思路:

页面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. 开源个.NetCore写的 - 并发请求工具PressureTool

    本篇和大家分享的是一个 并发请求工具,并发往往代表的就是压力,对于一些订单量比较多的公司这种情况很普遍,也因此出现了很多应对并发的解决方案如:分布式,队列,数据库锁等: 对于没有遇到过或者不可能线上来 ...

  2. XRouter-像Retrofit一样使用阿里开源路由中间件

    XRouter 一种基于Arouter的使用封装方案,实现对ARouter的Retrofit式使用. ARouter是阿里巴巴开源的Android平台中对页面.服务提供路由功能的中间件,没用过的务必点 ...

  3. org.w3c.dom.Element 缺少 setTextContent 步骤

    org.w3c.dom.Element 缺少 setTextContent 方法 今天将项目环境由jdk5改为jdk6,eclipse重新编译工程后,却突然出现org.w3c.dom.Element没 ...

  4. （转）centos7安装telnet服务

    场景:在进行Telnet测试时候,发现无法连接,所以还得把这个软件也安装了 1 CentOS7.0 telnet-server 启动的问题 解决方法:   先检查CentOS7.0是否已经安装以下两个 ...

  5. Orchard 学习

    https://github.com/OrchardCMS/Orchard  源码下载 http://www.orchardch.com/  中文介绍网站

  6. apache2修改用户和组

    grep nobody /etc/{passwd,group} groupadd nobody #有nobody用户的情况 usermod -G nobody nobody #没有nobody用户的情 ...

  7. Pandas: 如何将一列中的文本拆分为多行？ | Python

    Pandas: 如何将一列中的文本拆分为多行? 在数据处理过程中,经常会遇到以下类型的数据: 在同一列中,本该分别填入多行中的数据,被填在一行里了,然而在分析的时候,需要拆分成为多行. 在上图中,列名 ...

  8. MySql 求一段时间范围内的每一天，每一小时，每一分钟

    平常经常会求一段时间内的每一天统计数据,或者每一时点的统计数据.但是mysql本身是没有直接获取时点列表的函数或表.下面是自己用到的一些方法,利用临时变量和一个已存在的比较多数据(这个需要根据实际情况 ...

  9. ETL作业自动化调度软件TASKCTL4.5安装程序是选项解释

    下文仅针对TASKCTL4.5有效,在执行安装程序后,会看到安装程序有4个选项,其中,1和2是需要了解的. 1, 典型安装: 这个选项是单机部署,在第一次使用TASKCTL的时候,我用的是这种安装方式 ...

  10. 【bzoj2819】Nim

    Description 著名游戏设计师vfleaking,最近迷上了Nim.普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任意多个,可以取完,但不可以不取.谁不能取谁输.这个游 ...