导航栏标签定位

在实现同一个页面导航栏定位（聚焦）一直找不到好的实现方法。

比如：

[code]

<div class="navTitle">
        <ul>
          <li class="checked"><a href="index.asp"><font color="#979082">首页</font></a></li>
          <li><a href="photo.asp"><font color="#979082">希桥相册</font></a></li>  
          <li><a href="springcity.asp"><font color="#979082">春城美景</font></a></li>
          <li><a href="content.asp"><font color="#979082">联系我们</font></a></li>
          <li><a href="about.asp"><font color="#979082">关于我们</font></a></li>
        </ul>
</div>

[/code]

要实现当用户点击 希桥相册 时，让希桥相册的class="checked"来改变它的样式与其他的不同，而且要在刷新后保持。

在网上找了很多都不是很适用。有的用BODY的ID来定义，有的用COOKIE/SEEION来保存。但感觉都不是很好。

后来在一个BLOG里找到这个，用JS根据地址栏中的地址来改变样式。如下：

 

实现方式：为导航菜单的各项增加id，如命名方式：

<li class="home" id="L0"><a href="/">首页</a></li>
<li class="blog" id="L1"><a href="/labels/56S+5Lya.html">社会</a></li>
<li class="blog" id="L2"><a href="/labels/5LqS6IGU572R6KeG54K5.html">互联网</a></li>
<li class="blog" id="L3"><a href="/labels/5b2x6KeG5YWz5rOo.html">影视</a></li>
<li class="blog" id="L4"><a href="/labels/6ZiF6K+7.html">阅读</a></li>
<li class="list" id="L5"><a href="/labels/6ZqP56yU5bCP6K6w.html">随笔</a></li>

实现的js代码：

var cLocation = window.location.toString();//获取当前页面url地址如http://www.tianya8.net/labels/56S+5Lya.html

function changeStyle( idx ){
if(idx!=-1){
document.getElementById("L"+idx).className = "curr";
}
}//如果属于标签页或首页，则将对应的菜单项添加样式

function location_url(){
var former_start = cLocation.lastIndexOf( "/" );
//var former_mid = cLocation.lastIndexOf( "/" , former_start+1);
var former_end = cLocation.indexOf(".html" )
var former_name = cLocation.substring(former_start+1, former_end);
return former_name; // return "/somedir.html"
}//截取文件名（不含“.html”）

function getCurrentPageSubmenu(){
var shortName = location_url();
//alert(shortName);
switch ( shortName ){
case "56S+5Lya" : return 1; break;
case "5LqS6IGU572R6KeG54K5" : return 2; break;
case "5b2x6KeG5YWz5rOo" : return 3; break;
case "6ZiF6K+7" : return 4; break;
case "6ZqP56yU5bCP6K6w" : return 5; break;
case "home" : return 0; break;
default : return -1; break;
}
}//为如果是标签页或首页，则返回相应的值

var curSMenuID = getCurrentPageSubmenu();
changeStyle( curSMenuID.toString() );

 

这样是可以实现了，但不好是必须写死文件的名称。不知道还有没有其他好的JS实现方法。这段代码很值得参考。