jQuery动态添加.active 实现导航效果代码思路详解

 代码思路:

页面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" rel="external nofollow" class="">页面1</a></li>
 <li id="zf"><a href="zf.html" rel="external nofollow" class="">页面2</a></li>
 <li id="gc"><a href="gc.html" rel="external nofollow" class="">页面3</a></li>
 <li id="hc"><a href="hc.html" rel="external nofollow" class="">页面4</a></li>
 <li id="shwt"><a href="shwt.html" rel="external nofollow" class="">页面5</a></li>
 </ul>
</div>
</body>

总结

以上所述是小编给大家介绍的jQuery动态添加.active 实现导航效果代码思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 使用jquery给指定的table动态添加一行、删除一行

    使用jquery给指定的table动态添加一行、删除一行

    需求场景 1).添加一行 支持在任意行添加一行且可配置的,如可在第一行添加一行.第二行添加一行.倒数第一行添加一行.倒数第二行添加一行,随需求的变化都不会影响. 前提条件:行数需在表中存在否则添加不成功. 2).删除一行 支持动态删除一行. 先演示结果,如中意了在好好研究代码. 1.原始界面如下: 2.添加一行,如要添加一行需点击"添加"按钮,现点击两下会自动添加两行,效果如下截图: 3.删除一行,如要删除指定行,先要选中行然后在点击"删除"按钮进行删除(这不是废话

  • 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

  • jQuery实现动态添加tr到table的方法

    jQuery实现动态添加tr到table的方法

    本文实例讲述了jQuery实现动态添加tr到table的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" co

  • JQuery动态添加Select的Option元素实现方法

    如下所示: var selector=$('<select></select>'); for(var i=0;i<5;i++){ selector.append('<option value="'+i+'">'+i+'</option>'); } 以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery实现表格行和列的动态添加与删除方法【测试可用】

    jQuery实现表格行和列的动态添加与删除方法【测试可用】

    本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • jQuery为动态生成的select元素添加事件的方法

    项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelect =""; 2.在js中写好获取服务端数据的代码 function genVoucherGroupSelect(rowID){ return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).pa

  • jQuery动态添加.active 实现导航效果代码思路详解

    jQuery动态添加.active 实现导航效果代码思路详解

     代码思路: 页面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.l

  • jquery实现的横向二级导航效果代码

    jquery实现的横向二级导航效果代码

    本文实例讲述了jquery实现的横向二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款灰色和黑色共同搭配做出的水平横向网站菜单,网页横向菜单代码,包括二级子菜单,使用了几张图片,用的朋友自己顺路径另存为吧.本菜单兼容性不错,而且设计清新.漂亮.简约,鼠标移动到主菜单上,即可下滑出二级子菜单项. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-black-bg-nav-menu-style-codes/ 具体代码如下:

  • jQuery实现网页顶部固定导航效果代码

    jQuery实现网页顶部固定导航效果代码

    本文实例讲述了jQuery实现网页顶部固定导航效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • 微信小程序换肤功能实现代码(思路详解)

    在手机.电脑使用频率如此高的当下,应用可以更换皮肤,以提升美观性,并减轻屏幕对眼睛的刺激,无疑对用户体验有很大的帮助 实现功能 要实现如上更换皮肤的效果,有几个思路: 1.准备皮肤相关的wxss,引入到app.wxss中,方便每个页面使用: 2.设置皮肤时,动态改变wxml中元素的类名或id,使页面应用对应的皮肤: 3.将选中皮肤的值保存在小程序本地缓存中,保证其他页面及下一次打开小程序时,页面展示正确的皮肤: 下面介绍一些实现的细节 wxml <view class="page"

  • JS实现简单的选择题测评系统代码思路详解(demo)

    JS实现简单的选择题测评系统代码思路详解(demo)

    包含内容:JS封装表单,JS校验表单 说是测评系统,感觉只能算是一个小小的Demo,很水,,没有数据库库,,仅使用JS做简单的选择题测评系统 -------------------------------------------------------------------------------- 一.设计思路 表单封装: [1]由于采用JS封装提交所以,不需要form标签 [2]放置多个input标签,作为输入项 [3]编写JS获取输入项,并通过get方式提交到另一个页面 校验表单(显示结

  • jQuery动态添加删除select项(实现代码)

    复制代码 代码如下: // 添加function col_add() { var selObj = $("#mySelect"); var value="value"; var text="text"; selObj.append("<option value='"+value+"'>"+text+"</option>");}// 删除function col_d

  • JS 动态添加列表框项效果代码

    JS 动态添加列表框项效果代码

    *请选择1-3个知识点. 1213123123 2123123123 3213123213 4123213213 5213123213 6213123213 var addTo = document.getElementById("addto"); var moveBack = document.getElementById("moveback"); var selectLeft = document.getElementById("selectleft&

  • android实现截图并动画消失效果的思路详解

    整体思路 1.获取要截图的view 2.根据这个view创建Bitmap 3.保存图片,拿到图片路径 4.把图片路径传入自定义view(自定义view实现的功能:画圆角边框,动画缩小至消失) 主要用到的是ObjectAnimator属性动画的缩小和平移 核心代码 得到图片的路径 private String getFilePath() { Bitmap bitmap = createViewBitmap(picImg); if (bitmap != null) { try { // 首先保存图片

  • Qt实现界面滑动切换效果的思路详解

    Qt实现界面滑动切换效果的思路详解

    目录 一.Qt实现界面滑动切换效果 二. 设计思路 三.主要函数讲解 四.源代码解析 4.1 初始化界面 4.2 上一页滑动效果 4.3  下一页滑动效果 4.4 动画结束处理 五.源码地址 一.Qt实现界面滑动切换效果 效果如下图,滑动效果移动上下屏幕. 二. 设计思路 利用QStackWidget将页面存储起来,因为页面比较少,因此我直接将所有的页面存储在QStachWidget中,如果页面相对较多,可以使用使用使渲染的方式. 然后使用show函数同时展示两个页面的内容,这个很重要,如果使用

  • Jquery动态添加及删除页面节点元素示例代码

    通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

随机推荐