利用javasript凸显当前页

Tags:, Posted in Web前端 on 2009/06/03 | 10 条留言

这是一个简单而且实用的小技巧，至少我只这么觉得的:)。最早好像是是在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的样式就可以了

非特别声明文章均为原创，欢迎转载，转载请注明来自 wlsy ，另外你也可以订阅我。

Relate Posts:// 相关阅读

  • 暂无相关日志

已经有了10条煽情的读后感

我要发表
  1. Epile 在2009/06/03于15:21 激动地写下了：
    回复

    学到了~以前一直以为得通过PHP实现检测。

  2. xclricky 在2009/06/03于21:50 激动地写下了：
    回复

    better to put the following outside of the for loop, as it’s invariant
    var currenturl=window.location.href;/*获取当前页面的地址*/

    sorry to be picky :)

    • wlsy 在2009/06/03于22:59 激动地写下了：
      回复

      yep,my mistake,thanks:-)

  3. bolo 在2009/06/04于10:16 激动地写下了：
    回复

    还是喜欢自带的函数多一点

  4. Robor 在2009/06/05于08:18 激动地写下了：
    回复

    Not sure that this is true:), but thanks for a post.

  5. 止戈 在2009/07/03于09:18 激动地写下了：
    回复

    学习中，想用jquery来实现，研究中

  6. 小鬼 在2009/07/09于10:34 激动地写下了：
    回复

    提交Bug，天大的Bug
    你写错字了
    javasript应该是Javascript
    噢噢噢

    • wlsy 在2009/07/09于13:44 激动地写下了：
      回复

      十分感谢，已改正～

  7. Lxhome 在2009/07/12于23:17 激动地写下了：
    回复

    貌似有点复杂啊

  8. 短歌行 在2009/07/16于21:56 激动地写下了：
    回复

    我是菜鸟一个。

发表感言