<script type="text/javascript">

$(document).ready(function(){
var myNav = $("#nav a"),i; for(i=0;i<myNav.length;i++){ var links =myNav.eq(i).attr("href"),myURL =document.URL; if(myURL.indexOf(links) != -1) { myNav.eq(i).parent().addClass("current"); }
}
});
</script>

js代码

html部分

<div  id="nav" >
<ul >
<li ><a href=" ">主页</a></li>
<li><a href=" ">今日热点</a></li>
<li><a href=" ">当地新闻</a></li>
</ul>
</div>

css部分

#nav ul li.current {
background: transparent url(../images/left-tab.gif) no-repeat;
}
#nav ul li.current a {
color: #444;
background: transparent url(../images/right-tab.gif) no-repeat right top;
}

其实本身不是很难,主要对jQuery对象方法和属性有深入了解。留意jQuery对象小括号

jquery 当前页导航高亮显示的更多相关文章

  1. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  2. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  3. dede使用方法---用js让当前导航高亮显示

    当前导航高亮显示能够提升用户体验,我也知道,大家在网上搜dede让当前导航高亮显示的方法一抓一大把,但是,并不一定适合自己的需求.就像我的需求一样,导航有个二级导航,然后需要做到让当前导航高亮显示.我 ...

  4. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  5. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  6. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  7. jQuery实现导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  9. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

随机推荐

  1. SCU 4440 Rectangle 2015年四川省赛题

    题目链接:http://acm.scu.edu.cn/soj/problem/4440/ 题目大意:给一个n*m的方格,求周长小于等于k的矩形有多少个. 解题思路:我之前直接暴力,显然超时,所以后来发 ...

  2. 423. Reconstruct Original Digits from English

    这个题做得突出一个蠢字.. 思路就是看unique letter,因为题里说肯定是valid string.. 一开始有几个Z就有几个ZERO 同样的还有x for six, g for eight, ...

  3. 10个经典的Java面试题

    这里有10个经典的Java面试题,也为大家列出了答案.这是Java开发人员面试经常容易遇到的问题,相信你了解和掌握之后一定会有所提高.让我们一起来看看吧. 1.Java的HashMap是如何工作的? ...

  4. lesson10:hashmap变慢原因分析

    下面的英文描述了String.hashCode()方法,在特定情况下,返回值为0的问题: Java offers the HashMap and Hashtable classes, which us ...

  5. c# mongo 返回指定的列

    var query= db.GetCollection<Merchant>("merchant").Find(Query<Merchant>.EQ(m =& ...

  6. HDU 4622 多校第三场1002 后缀自动机

    比赛的时候我是用后缀数组的,但是T了. 赛后看了解题报告说,后缀数组貌似是卡你常数的时间,我算了下复杂度O(T * Q * n).这是10 ^ 8,但是考虑到每次询问的时候都要重新构造字符,所以那个n ...

  7. jq實現網頁個性title

    <!DOCTYPE html> <html content="text/html; charset=UTF-8"> <title>tooltip ...

  8. IO流--转载

    第 1 部分 从输出流中读取 http://www.ibm.com/developerworks/cn/java/j-io1/ 自早期基于浏览器的 applet 和简单应用程序以来,Java 平台已有 ...

  9. java.lang.ClassCastException: android.view.ViewGroup$LayoutParams cannot be cast to android.widget.L(转)

    09-09 10:19:59.979: E/AndroidRuntime(2767): FATAL EXCEPTION: main09-09 10:19:59.979: E/AndroidRuntim ...

  10. 从C到汇编:栈是计算机工作的基础

             作者:r1ce        原创作品转载请注明出处       <Linux内核分析> MOOC课程http://mooc.study.163.com/course/U ...