简单的利用js和li作导航条定位判断

2009.03.25 作者: 小V - 2 评论
文章分类: JavaScript

«
»

做站时，又遇上以前一个老问题，虽然很多像wp都是通过后台程序直接判断后再给其加上重叠css。

有时，一些程序不支持，或者说我不懂怎么弄，只好靠前台这js来判断路径给它加上这导航条定位的效果。
代码如下，很简单自已领悟下就明白。
再给个在线测试的地址(这里的目录被我弄成webtest显示的是第5个li，你可以自已更改其达到效果）

http://vl99.com/webtest/navpos.htm

<div class="prt2">
<ul class="guide" id="headerIndex">
<li class="g1"><a href="#"><b>首页</b></a> </li>
<li class="g2"><a href="#"><b>化妆品</b></a> </li>
<li class="g3"><a href="#"><b>圈子</b></a> </li>
<li class="g4"><a href="#"><b>积分活动</b></a> </li>
<li class="g5"><a href="#"><b>美容学堂</b></a>
</li></ul></div></div>
<script>
var path=window.location.href;

var headerIndex=document.getElementById("headerIndex");
var artlis = headerIndex.getElementsByTagName("li");
try{
if(path.indexOf("/search")!=-1) {
artlis[1].className= artlis[1].className + " on";
} else if(path.indexOf("/bbs")!=-1) {
artlis[2].className= artlis[2].className + " on";
} else if(path.indexOf("/help")!=-1) {
artlis[3].className= artlis[3].className + " on";
} else if(path.indexOf("/webtest")!=-1) {
artlis[4].className= artlis[4].className + " on";
} else if(path.indexOf("/shop")!=-1) {
artlis[1].className= artlis[1].className + " on";
} else {
artlis[0].className= artlis[0].className + " on";
}
}catch(e){}
</script>

相关文章

文章中包含标签:,

«
»
  1. king51 says:
    2009/03/26 at 13:20 | 地址:河北省廊坊市

    这个页怎么有没有样式了？

    Reply
    • 小V says:
      2009/03/27 at 00:01 | 地址:福建省泉州市

      ...怪，我看得好好的呀。怎么你好像看都会没样式，难道我的html没闭合好？

      Reply