jquery 当前页导航高亮显示
<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 当前页导航高亮显示的更多相关文章
- 分享21个基于jquery菜单导航的效果
jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
- dede使用方法---用js让当前导航高亮显示
当前导航高亮显示能够提升用户体验,我也知道,大家在网上搜dede让当前导航高亮显示的方法一抓一大把,但是,并不一定适合自己的需求.就像我的需求一样,导航有个二级导航,然后需要做到让当前导航高亮显示.我 ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- jQuery 顶部导航尾随滚动,固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- 30个实用的jQuery选项卡/导航教程推荐
很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...
- jQuery实现导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- 10款最新CSS3/jQuery菜单导航插件
这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...
随机推荐
- SCU 4440 Rectangle 2015年四川省赛题
题目链接:http://acm.scu.edu.cn/soj/problem/4440/ 题目大意:给一个n*m的方格,求周长小于等于k的矩形有多少个. 解题思路:我之前直接暴力,显然超时,所以后来发 ...
- 423. Reconstruct Original Digits from English
这个题做得突出一个蠢字.. 思路就是看unique letter,因为题里说肯定是valid string.. 一开始有几个Z就有几个ZERO 同样的还有x for six, g for eight, ...
- 10个经典的Java面试题
这里有10个经典的Java面试题,也为大家列出了答案.这是Java开发人员面试经常容易遇到的问题,相信你了解和掌握之后一定会有所提高.让我们一起来看看吧. 1.Java的HashMap是如何工作的? ...
- lesson10:hashmap变慢原因分析
下面的英文描述了String.hashCode()方法,在特定情况下,返回值为0的问题: Java offers the HashMap and Hashtable classes, which us ...
- c# mongo 返回指定的列
var query= db.GetCollection<Merchant>("merchant").Find(Query<Merchant>.EQ(m =& ...
- HDU 4622 多校第三场1002 后缀自动机
比赛的时候我是用后缀数组的,但是T了. 赛后看了解题报告说,后缀数组貌似是卡你常数的时间,我算了下复杂度O(T * Q * n).这是10 ^ 8,但是考虑到每次询问的时候都要重新构造字符,所以那个n ...
- jq實現網頁個性title
<!DOCTYPE html> <html content="text/html; charset=UTF-8"> <title>tooltip ...
- IO流--转载
第 1 部分 从输出流中读取 http://www.ibm.com/developerworks/cn/java/j-io1/ 自早期基于浏览器的 applet 和简单应用程序以来,Java 平台已有 ...
- 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 ...
- 从C到汇编:栈是计算机工作的基础
作者:r1ce 原创作品转载请注明出处 <Linux内核分析> MOOC课程http://mooc.study.163.com/course/U ...