代码思路:

页面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. 使用express， create-react-app， mongodb搭建react模拟数据开发环境

    提要 最近刚刚完成了一个vue的项目,其中涉及的用户数有6000多个以及其他数据也比较多,为了在前端能够真实的进行数据模拟,所有把全量数据拷贝下来放到了api.json中.这样导致整个api.json ...

  2. join和wait

    最近看多线程的时候发现对于join的理解有些错误,在网上查了不少资料,根据自己的理解整理了一下,这里之所以把join和wait放在一起,是因为join的底层实现就是基于wait的,一并讲解更容易理解. ...

  3. Memcached的基础梳理

    1 .Memcached 概念 官方解释如下: What is Memcached? Free & open source, high-performance, distributed mem ...

  4. 共享---samba

    1．  虚拟机,可以采用共享文件夹 2．  windows之间可以使用网络邻居共享 3．  windows与linux,linux与linux之间建立samba服务器 4．  安装samba服务器 r ...

  5. yii2 队列 shmilyzxt/yii2-queue 简介

    在yii2论坛中看到一个关于队列的帖子,感觉不错.http://www.yiichina.com/extension/1084 (注:SendMail 错写为 SendMial,粘贴时要注意了.) 在 ...

  6. 根据百度，gps坐标获取天气

    楼主用的是阿里天气免费版,限制1000次,可以重复购买 下面放代码 var orgWindow = new OrganizeWindowProxy(WorkContext); var orgInfo ...

  7. inet_ntoa将客户端的IP和port写入M…

    问题:inet_ntoa将客户端的IP和port写入MYSQL中的解决方法和遇到的问题

  8. 表达式求值（二叉树方法/C++语言描述）（二）

    表达式二叉树节点的数据可能是运算数或运算符,可以使用一个联合体进行存储:同时还需要一个变量来指示存储的是运算数还是运算符,可以采用和栈方法求值中一样的枚举类型TokenType: typedef en ...

  9. 庖丁解牛——CY7C68013A开发框架

    大家好,好久不见了,距离上次发文章都有两个多星期了,非常高兴同时也非常感谢你们能一直关注我.之前在公众号上收到网友的消息,其大概意思就是问我能不能出点USB干货,为此我就把第二篇--解密USB2.0数 ...

  10. [转]为什么大型网站前端使用 PHP 后台逻辑用 Java？

    最近纠结了一下,如果开发一个大型的网站,我到底应该使用php还是jsp,后台到底使用php还是用java,我的选择要么是php要么是java,因为我喜欢linux.unix,当然window平台也必须 ...