利用javasript凸显当前页

一直用后台程序来凸显导航栏中的当前项，JavaScript也能办到！

这是一个简单而且实用的小技巧，至少我只这么觉得的:)。最早好像是是在DOM Scripting 里面看到的。好吧，废话不说了，直接上代码好好享用。

比如导航栏的XHTML代码是这样的：

<ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li></ul>

那么如何才能凸显当前页面的呢？给当前页面的链接加个class，然后通过CSS来控制其显示样式，这样行为和表现分开了，以后更改也方便。
送上javascript代码：

function currentPage(){ if (!document.getElementById("nav")) return false;/*进行必要的测试，避免没有id为nav时候出错*/ var nav=document.getElementById("nav"); var links=nav.getElementsByTagName("a"); var currenturl=window.location.href;/*获取当前页面的地址*/ for(i=1;i<links.length;i++){ var url=links[i].getAttribute("href");/*获取链接的href值*/ if(currenturl.indexOf(url)!=-1){/*如果链接的href值在当前页面地址中有匹配*/ links[i].className="current"; } }}window.onload=currentPage;/*载入页面时加载*/

好了，接下来你就可在css里面定义current的样式了，以后要修改也只要在css里面修改

友情提示：如果各位想要在wordpress里面凸显当前页，wordpress有个自带的函数如下：

<ul><li <?php if (is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('url'); ?>/">首页</a></li><?php wp_list_pages('&title_li='); ?></ul>

你可以在css定义.current_page_item的样式就可以了

资料来源：  http://wlsy.me/1605/#more-1605