<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. Delphi NativeXml用法攻略

    NativeXml用法攻略 NativeXml可以在官网上下载,下载后将文件夹放在指定地方,打开DELPHI在其环境变量中引用NativeXml路径,然后在程序中引用NativeXml单元,我们就可以 ...

  2. Selenium自动化测试环境搭建汇总(一):Selenium+Eclipse+Junit+TestNG

    第一步 安装JDK JDk1.7. 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-188026 ...

  3. kafka中对一个topic增加replicas

    是指手动写扩充replicas的配置文件,然后使用工具进行操作. 参考官网site:http://kafka.apache.org/documentation.html#basic_ops_autom ...

  4. 数学概念——G 最大公约数

    G - 数论,最大公约数 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit ...

  5. Nodejs in Visual Studio Code 06.新建Module

    1.开始 Node.js:https://nodejs.org 2.Moudle js编程中,由于大家可以直接在全局作用域中编写代码,使开发人员可以很容易的新建一个全局变量或这全局模块,这些全局变量或 ...

  6. 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 ...

  7. Android 4.4(KitKat)中VSync信号的虚拟化

    原文地址:http://blog.csdn.net/jinzhuojun/article/details/17293325 Android 4.1(Jelly Bean)引入了Vsync(Vertic ...

  8. 10款AJAX/CSS/HTML的在线表单生成器

    本文转载:http://www.oschina.net/news/24327/10-ajax-css-html-online-form-builder 在这篇文章中,我们将介绍10个超棒的在线表单生成 ...

  9. Android Dialog触摸对话框外部让其消失的实现方法

    方法一: @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent ...

  10. 《Head First 设计模式》学习笔记——工厂模式 + 抽象工厂模式

    设计模式 工厂模式:定义一个创建对象的接口,但由子类决定要实例化的是哪一个.工厂方法让类把实例化推迟到子类. 所谓的"决定",并非指模式同意子类本身在执行时做决定,而是指在编写创建 ...