想做个点击后切换的效果。。

<!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'>
window.onload = function(){
var list = document.getElementById("tabMenu").getElementsByTagName("li");
var content = document.getElementById("tabContent").getElementsByTagName("ul")
for(var i = 0; i < list.length; i++){
list[i].onclick = function(){
var li = list.length;
while(li--){
list[li].className = "";
content[li].className = "hidden";
}
this.className = "cli";
content[i].className = "";
}
}
}
  </script>
    
<div class="tabBox">
    <div class="tabMenu" id="tabMenu">
        <ul>
            <li class="cli">新闻</li>
            <li>游戏</li>
            <li>音乐</li>
            <li>论坛</li>
            <li>聊天</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.   

    <!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'>
    window.onload = function() {
    var list = document.getElementById("tabMenu").getElementsByTagName("li");
    var content = document.getElementById("tabContent").getElementsByTagName("ul")
    for(var i = 0; i < list.length; i++) {
    list[i].onclick = function(i) {
    return function() {
    var li = list.length;
    while(li--) {
    list[li].className = "";
    content[li].className = "hidden";
    }
    this.className = "cli";
    content[i].className = "";
    }
    }(i);
    }
    };
    </script> <div class="tabBox">
    <div class="tabMenu" id="tabMenu">
    <ul>
    <li class="cli">
    新闻
    </li>
    <li>
    游戏
    </li>
    <li>
    音乐
    </li>
    <li>
    论坛
    </li>
    <li>
    聊天
    </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>
      

  2.   

    <!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'>
    window.onload = function(){
    var list = document.getElementById("tabMenu").getElementsByTagName("li");
    var content = document.getElementById("tabContent").getElementsByTagName("ul")
    for(var i = 0; i < list.length; i++){(function(i){
    list[i].onclick = function(){
    for(var j = 0; j < list.length; j++){
    list[j].className = '';
    content[j].style.display = 'none'
    }
    this.className = 'cli';
    content[i].style.display = 'block';
    }
    })(i)}
    }
      </script>
        
    <div class="tabBox">
      <div class="tabMenu" id="tabMenu">
      <ul>
      <li class="cli">新闻</li>
      <li>游戏</li>
      <li>音乐</li>
      <li>论坛</li>
      <li>聊天</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>
      

  3.   

    window.onload = function() {
    var list = document.getElementById("tabMenu").getElementsByTagName("li");
    var content = document.getElementById("tabContent").getElementsByTagName("ul")
    for(var i = 0; i < list.length; i++) {
    list[i].onclick = function(i) {
    return function() {
    var li = list.length;
    while(li--) {
    list[li].className = "";
    content[li].className = "hidden";
    }
    this.className = "cli";
    content[i].className = "";
    }
    }(i);
    }
    };你的i是在外面定义了 只会保留for循环最后的i 要用闭包传进去
      

  4.   

    你这里不能用for循环
    你在list[i].onclick 前面加上一句alert(i);就知道怎么回事了