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菜单,有水平 菜 ...
随机推荐
- Delphi NativeXml用法攻略
NativeXml用法攻略 NativeXml可以在官网上下载,下载后将文件夹放在指定地方,打开DELPHI在其环境变量中引用NativeXml路径,然后在程序中引用NativeXml单元,我们就可以 ...
- Selenium自动化测试环境搭建汇总(一):Selenium+Eclipse+Junit+TestNG
第一步 安装JDK JDk1.7. 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-188026 ...
- kafka中对一个topic增加replicas
是指手动写扩充replicas的配置文件,然后使用工具进行操作. 参考官网site:http://kafka.apache.org/documentation.html#basic_ops_autom ...
- 数学概念——G 最大公约数
G - 数论,最大公约数 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit ...
- Nodejs in Visual Studio Code 06.新建Module
1.开始 Node.js:https://nodejs.org 2.Moudle js编程中,由于大家可以直接在全局作用域中编写代码,使开发人员可以很容易的新建一个全局变量或这全局模块,这些全局变量或 ...
- Codeforces Round #259 (Div. 2) D. Little Pony and Harmony Chest 状压DP
D. Little Pony and Harmony Chest Princess Twilight went to Celestia and Luna's old castle to resea ...
- Android 4.4(KitKat)中VSync信号的虚拟化
原文地址:http://blog.csdn.net/jinzhuojun/article/details/17293325 Android 4.1(Jelly Bean)引入了Vsync(Vertic ...
- 10款AJAX/CSS/HTML的在线表单生成器
本文转载:http://www.oschina.net/news/24327/10-ajax-css-html-online-form-builder 在这篇文章中,我们将介绍10个超棒的在线表单生成 ...
- Android Dialog触摸对话框外部让其消失的实现方法
方法一: @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent ...
- 《Head First 设计模式》学习笔记——工厂模式 + 抽象工厂模式
设计模式 工厂模式:定义一个创建对象的接口,但由子类决定要实例化的是哪一个.工厂方法让类把实例化推迟到子类. 所谓的"决定",并非指模式同意子类本身在执行时做决定,而是指在编写创建 ...