导航栏当前选中链接的css效果实现

在制作网站时,特别是做导航链接的时候,往往需要实现用户点击哪个链接,哪个链接就要突出显示。如下图





那么,如何实现上面的效果呢?其实非常的简单,首先获取导航栏div(或者其它元素,总之就是包含导航链接的上层元素),获取其下属的所有a标签,然后再判断当前浏览器的url地址是否包含a标签href属性的地址,如果包含则说明当前url地址就是该a链接对应的地址,那么设置当前a标签的css为突出显示,否则设置当前a标签的css不突出显示。

下面的是导航的html源代码:

<div id="navleft">
<ul>
<li><a href="/">网站首页</a></li>
<li><a href="/Home/Index?Recommend=true" title="站长推荐的精品文章">站长推荐</a></li>
<li><a href="/Home/Girl" title="美女专栏">美女专栏</a></li>
<li><a href="http://wpa.qq.com/msgrd?v=3&uin=240452625&site=qq&menu=yes" target="_blank" title="软件定制,网站开发请与我联系">软件定制</a></li>
<li><a href="http://www.jfkjw.com" target="_blank" title="服务器、VPS、虚拟主机租用">服务器租用</a></li>
<li><a href="/Home/About">关于我们</a></li>
</ul>
</div>

下面是实现设置css效果的JavaScript代码:

<script type="text/javascript">
$(function ()
{
//设置导航栏的css效果
if (!document.getElementById("navleft"))
{
return false;
}
var nav = document.getElementById("navleft");
var links = nav.getElementsByTagName("a");
var currenturl = window.location.href;
for (i = 1; i < links.length; i++)
{
var url = links[i].getAttribute("href");
var regex = new RegExp('\\b' + url + '\\b')
if (regex.exec(currenturl) != null)
{
    links[i].className = "current";
}
else
{
if (currenturl.substring(currenturl.length - 1, currenturl.length) == "/")
{
links[0].className = "current";
}
}
}

</script>


注意:本方法适用于点击导航栏后整个网页会刷新的情况,如果点击导航后局部刷新(至少导航栏不刷新)的话,那么可以使用另外一种更简单方便的方法http://www.28ab.cn/2688.html

  1. 本网站所收集的部分资料来源于互联网,本站不对其真实性负责,也不构成任何其他建议。如果您发现有侵犯您权益的内容,请与我们取得联系,我们会及时修改或删除。
  2. 传递知识、传递力量,欢迎各位网友对本站的文章进行转载和分享。
  3. 本站QQ群交流群:904314688  群号:904314688

版权所有:秋风雅居 (www.28ab.cn) ©2013-2019 All Rights Reserved.

粤ICP备19021598号-3