求救，改变选中栏目的样式？

Question

<div class="tabnav">
<ul id="menu1">
     <li><a href="#" onClick="setTab(1,0)" class="tabover">首页</a></li>
        <li><a href="default.php?tab=news" onClick="setTab(1,1)">国内</a></li>
        <li><a href="default.php?tab=news" onClick="setTab(1,2);">国际</a></li>
        <li><a href="#" onClick="setTab(1,3);">体育</a></li>
        <li><a href="#" onClick="setTab(1,4);">娱乐</a></li>
        <li><a href="#" onClick="setTab(1,5);">财经</a></li>
        <li><a href="#" onClick="setTab(1,6);">科技</a></li>
        <li><a href="#" onClick="setTab(1,7);">汽车</a></li>
</ul>
</div>
<script language="javascript" type="text/javascript">
function setTab(m,n)
{
        var tli=document.getElementById("menu"+m).getElementsByTagName("li");
for(i=0;i<tli.length;i++){
   tli[i].className=i==n?"tabover":"";
}
}
</script>--------
以上这段代码要怎么改才可以达到我要的效果。

Answer 1

点击的时候，像Google音乐[http://www.google.cn/music/homepage]，我点击［排行榜］的时候，排行榜栏目为选中样式，其它的栏目则为不选中样式。

Answer 2

Quote=引用 2 楼 leisure_cool 的回复:]
点击的时候，像Google音乐[http://www.google.cn/music/homepage]，我点击［排行榜］的时候，排行榜栏目为选中样式，其它的栏目则为不选中样式。 
[/Quote]
其实很简单,
如果你的页面点击需要重新load的话,需要让当前页面知道,哪个是当中选中的项.比如说[首页].//liselected为选中后的css样工式
//m为菜单组,n为选中的li编号
function setTab(m,n) 
{ 
    var tli=document.getElementById("menu"+m).getElementsByTagName("li"); 
    for(i=0;i <tli.length;i++)
    { 
       tli[i].className= (i==n) ? "liselected" : ""; 
    } 
} 

Answer 3

<li> <a href="default.php?tab=news" onClick="setTab(1,1)">国内 </a> </li> 
=======================================================================
链接里又有href，又有onClick，ie/ff下执行顺序都不一样，你应该把onclick事件赋给外面那一层li参考:
<style>
.tabover{
background:red;
}
#menu1{
list-style:none;
}
#menu1 li{
list-style:none;
float:left;
width: 100px;
border:1px solid #ccc;
margin:2px;
padding:2px;
text-align:center;

}
</style>
<div class="tabnav">
<ul id="menu1">
    <li> <a href="#" >首页 </a> </li>
        <li> <a href="default.php?tab=news" >国内 </a> </li>
        <li> <a href="default.php?tab=news" >国际 </a> </li>
        <li> <a href="#" >体育 </a> </li>
        <li> <a href="#" >娱乐 </a> </li>
        <li> <a href="#" >财经 </a> </li>
        <li> <a href="#" >科技 </a> </li>
        <li> <a href="#" >汽车 </a> </li>
</ul>
</div>
<script language="javascript" type="text/javascript">
(
function(){
var $ = function($){return document.getElementById($)}
   ,menus = $('menu1')
   ,tli   = menus.getElementsByTagName("li")
   ,clearOver = function(){
var o = {};
return function(x){ if(o.tabN != x){
o.tabN = x;
if(o.tab) o.tab.className = '';
this.className = 'tabover';
o.tab  = this;

}
else this.className = '';
}
   }()
for(i=0;i <tli.length;i++){
tli[i].onclick = function(i){
var _this = this;
return function(){
_this.className = 'tabover';
clearOver.call(_this,i);
}
}.call(tli[i],i)
}
   
}
)()
</script>

Answer 4

感谢，也找到解决问题的根本，样式问题。
我把样式[tabover]放到了<a href>标签中了，而我函数改变的<li>标签样式，但样式[tabover]放到
<li>标签中却没有任何改变