下面这段代码是鼠标经过即切换选项卡，如何更改为点击才切换选项卡？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="bg2312" />
<title>滑动TAB</title>
<style type="text/css">    *{padding:0;margin:0;font-size:12px;}
    ul{list-style:none;}
    .tabBox{
        width:300px;
        margin:55px auto;
    }
    .tabMenu{
        height:27px;
        width:295px;
        border-left:1px solid #ccc;
        border-top:1px solid #ccc;
    }
    .tabMenu li{
        float:left;
        height:27px;
        width:58px;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        text-align:center;
        line-height:27px;
        background:#eee;
    }
    .tabMenu .cli{
        background:#fff;
    }
    #tabContent{
        border:1px solid #ccc;
        border-top-width:0;
        width:294px;
    }
    #tabContent .hidden{
        display:none;
    }
</style>
</head>
<body>
    <script type='text/javascript'>
        function tabChange(obj,id){
            var tabLi = obj.parentNode.getElementsByTagName("li");
            var tabContents = document.getElementById(id).getElementsByTagName("ul");
            for(var i=0; i<tabContents.length; i++){
                if(obj == tabLi[i]){
                    tabLi[i].className = "cli";
                    tabContents[i].className = "";
                }
                else{
                    tabLi[i].className="";
                    tabContents[i].className = "hidden";
                }
            }
        }
    </script>
    
    <div class="tabBox">
        <div class="tabMenu">
            <ul>
                <li onmouseover="tabChange(this,'tabContent')" class="cli">新闻</li>
                <li onmouseover="tabChange(this,'tabContent')">游戏</li>
                <li onmouseover="tabChange(this,'tabContent')">音乐</li>
                <li onmouseover="tabChange(this,'tabContent')">论坛</li>
                <li onmouseover="tabChange(this,'tabContent')">聊天</li>                
            </ul>
        </div>        <div id="tabContent">
            <ul>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>                
            </ul>
            <ul class="hidden">
                <li><a href="#">2222222222222222</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>                
            </ul>
            <ul class="hidden">
                <li><a href="#">3333333333333333</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>                
            </ul>
            <ul class="hidden">
                <li><a href="#">44444444444444444</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>                
            </ul>
            <ul class="hidden">
                <li><a href="#">5555555555555555</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>
                <li><a href="#">1111111111111111</a></li>                
            </ul>
        </div>
    </div>
</body>
</html>

解决方案 »

  1.   

    <li onmouseover="tabChange(this,'tabContent')" class="cli">新闻</li>
      <li onmouseover="tabChange(this,'tabContent')">游戏</li>
      <li onmouseover="tabChange(this,'tabContent')">音乐</li>
      <li onmouseover="tabChange(this,'tabContent')">论坛</li>
      <li onmouseover="tabChange(this,'tabContent')">聊天</li>  改成onclick事件
    <li onclick="tabChange(this,'tabContent')" class="cli">新闻</li>
      <li onclick="tabChange(this,'tabContent')">游戏</li>
      <li onclick="tabChange(this,'tabContent')">音乐</li>
      <li onclick="tabChange(this,'tabContent')">论坛</li>
      <li onclick="tabChange(this,'tabContent')">聊天</li>