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 相关文章推荐
mailto的使用技巧分享
Dec 21 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python实现logistic分类算法代码
2020/02/28 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
精伦电子Java笔试题
2013/01/16 面试题
大学专科生推荐信范文
2013/11/23 职场文书
工作交流会欢迎词
2014/01/12 职场文书
机关财务管理制度
2014/01/17 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
机械系毕业生求职信
2014/05/28 职场文书
个人总结与自我评价
2014/09/18 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android