javascript实现当前页导航激活

html

<ul id=”nav”>
<li><a href=”http://www.daqianduan.com/”>首页</a></li>
<li><a href=”http://www.daqianduan.com/category/html-css/”>HTML/CSS</a></li>
<li><a href=”http://www.daqianduan.com/category/javascript/”>JavaScript</a></li>
<li><a href=”http://www.daqianduan.com/category/seo/”>SEO</a></li>
<li><a href=”http://www.daqianduan.com/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(http://img.daqianduan.com/ui/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(http://img.daqianduan.com/ui/nav.gif) no-repeat 0 0;margin-left:-3px;}
#nav li.on a{background:url(http://img.daqianduan.com/ui/nav.gif) no-repeat right 0;}

  

javascript实现当前页导航激活,布布扣,bubuko.com

时间: 2024-10-16 14:36:01

javascript实现当前页导航激活的相关文章

JavaScript获取当前页面的用户区宽高问题

在网页的前端开发中,我们常常会涉及到自适应宽度,也就是说我们希望页面总是满宽显示.在这个过程中为了获得更好的用户体验和跨浏览器的兼容性,我们会在不同的用户区分辨率下实时载入不同的CSS文件,当然这就涉及到获取用户区的宽度(最主要是宽度). 在javascript中,可以通过访问window.innerWidth,window.innerHeight和document.documentElement.clientWidth,document.documentElement.clientHeight

5.JavaScript优化及导航菜单背后的秘密

JavaScript优化及导航菜单背后的秘密 伍星 学习目标1.进一步了解前端优化 学习如何编写良好的 JavaScirpt2.通过导航的学习,了解JavaScirpt的应用 JavaScript在用户体验优化的实现中起着至关重要的作用3.前端开发相关的工具和手段了解 了解JavaScript开发相关的工具和手段 目录 CONTENTS1 回顾:HTML语义.CSS高级2 编写高效的 JavaScript3 认识导航菜单及其开发4 导航菜单的性能加速5 破解牛X导航菜单的秘密5 JS的调试.压缩

Win10系列:JavaScript页内导航

页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容.WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件.PageControlNavigator控件

Javascript下拉导航

1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; whichlink=(e.target)? e.target.id: e.srcElement.id; obj=document.getElementById(whichlink+"menu"); visible=(obj.style.display=="block"

javascript网页定位导航的实现

本文针对网页定位导航,用javascript进行效果实现.本文是慕课网的一个练习题,程序中,我注释掉的部分是其中的例题代码,我没有调通或者是根本没有必要那么写. 还有例题中用window.load来加载函数,不能实时刷新网页来进行显示,当滚动条滑动时需要刷新一下页面才能看到效果,所以我不其删掉,用定时器setInterval来控制,动作实时刷新 <!DOCTYPE html> <html> <head> <meta http-equiv="Content

Javascript 仿苹果导航菜单

使用 Javascript 制作的仿苹果导航菜单,当鼠标移过时,使用勾股定理计算当前鼠标所在位置和图片中心点的距离,并且用一个 scale变量 来存储触发缩放的位置,距离越近,scale值越接近1,图片也就越大,这里需要注意的是当 scale的值小于0.5时,应该让它一直等于0.5,不然图片会随着鼠标距离图片中心的距离越远,图片越小甚至消失. 效果如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4

Javascript 获取当前页面的url信息

测试url : http://www.test.com:80/aaa/a.aspx?id=5&name=yh function GetQueryString(name) { if (name=="url"){ return window.location.pathname; } var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = windo

Javascript导航菜单13则

来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html翻译:http://parandroid.com下面为你准备了13个利用Javascript实现的网页导航菜单 1) Sexy Sliding Menu- 基于mootools的Javascript网页导航菜单,漂亮的滑动门技术,看到下面的图了没有,用它来设计你的Sidebar,非常之炫,Sexy,是的. Demo: Mootols VersionDemo: Scri

【JavaScript】获取当前页的URL与window.location.href

利用Javascript获取当前页的URL,这个问题起来好像很复杂,如果第一次去想这个问题,很多人估计又在琢磨到底又是哪个神一般的Javascript函数. 其实不是,Javascript获取当前页的URL的函数就是我们经常用来重定向的window.location.href. 比如如下函数: <script> var url=window.location.href; var loc = url.substring(url.lastIndexOf('/')+1, url.length); a