利用javasript凸显当前页

wlsy — Wed, 03 Jun 2009 06:31:51 +0000

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

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

<ul id="nav">
   <li><a href="#">homea>li>
   <li><a href="#">abouta>li>
   <li><a href="#">contacta>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
        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有个自带的函数如下：

if (is_home()){echo 'class="current_page_item"';}?>>

"/">首页

'&title_li='); ?>

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

wlsy » 技巧

利用javasript凸显当前页