javascript实现当前页导航激活的方法


Posted in Javascript onFebruary 27, 2015

本文实例讲述了javascript实现当前页导航激活的方法。分享给大家供大家参考。具体如下:

html部分(引用的导航,不可用#代替链接,测试可以新建几个静态页面)

<ul id="nav">
<li><a href="/">首页</a></li>
<li><a href="/category/html-css/">HTML/CSS</a></li>
<li><a href="/category/javascript/">JavaScript</a></li>
<li><a href="/category/seo/">SEO</a></li>
<li><a href="/category/front-end/">前端新闻</a></li>
</ul>

javascript部分(给当前页面指定导航加了.on的class)

$(function() {
var a1 = document.URL;
var a2 = $("#nav a");
for (var i = 0; i < a2.length; i++) {
if (a1.indexOf($(a2[i]).attr("href")) != -1) {
$(a2[i]).parent().addClass("on");
return;
}
}
$(a2[0]).parent().addClass("on");
})

css部分(可根据自己的需求做相关调整)

#nav li{
display:inline-block;
float:left;
text-align:center;
height:36px;
padding-left:4px;
line-height:36px;
background:url(images/nav.gif) no-repeat right bottom;
}
#nav li a{
display:block;
color:#777;
padding:0 15px 0 10px;
}
#nav li.on{
font-weight:bold;
background:url(images/nav.gif) no-repeat 0 0;
margin-left:-3px;
}
#nav li.on a{
background:url(images/nav.gif) no-repeat right 0;
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
jquery 根据name名获取元素的value值
Feb 27 #Javascript
jQuery使用元素属性attr赋值详解
Feb 27 #Javascript
jquery实现公告翻滚效果
Feb 27 #Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 #Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 #Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 #Javascript
js使用post 方式打开新窗口
Feb 26 #Javascript
You might like
php session和cookie使用说明
2010/04/07 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
可以将word转成html的js代码
2010/04/11 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
python生成器用法实例详解
2019/11/22 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
java程序员面试交流
2012/11/29 面试题
日语专业毕业生求职信
2013/12/04 职场文书
预备党员思想汇报
2014/01/08 职场文书
考试不及格的检讨书
2014/01/22 职场文书
小学家长评语大全
2014/04/16 职场文书
班级心理活动总结
2014/07/04 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书