如何用js做到滑动效果

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 
<script> 
var h = document.getElementById("tab").getElementByTagName("h3");
var d = document.getElementById("tab").getElementByTagName("div");
 
 function go_to(ao)
 {
 for(var i=0; i<h.length;i++)
 
 {
 if(ao-1==i)
 {
 d[i].className+="block";
 
 }
 
 }
 
 
 
 }
 
 
 
</script>
 
 
 
 
 
<style> 
 
 
 
 
 
 
 
/*  body部分  */
 
.bodv_div { width:1000px; background-color:#F99; margin:0 auto;}
.first_div{}
.language_title { width:1000px; height:20px; background-color: #39F}
#tab { width:1000px; height:100px; background-color:#FF3}
 
#tab h3{float:left; width:120px; height:26px; line-height:26px; margin:0; font-size:12px; cursor:pointer; text-align:center; color:red; background-color:#CCC}
 
 
 
#tab div{display:none;}
#tab .block{display:block;}
#tab div{ height:60px; width:1000px; background-color:#FC9; clear:both}
 
 
 
</style>
</head>
<body>
 
 
 
<!--  head部分  -->
 
 
<!--   body部分  -->
<div class="bodv_div">
 
<div class="language_title">网页编程</div>
 
 
 
<!--   body 内容显示部分  -->
 
<div id="tab">
<h3 onclick="go_to(1)">选择一
</h3>
 
 
<h3 onclick="go_to(2)">选择二
</h3>
 
<h3 onclick="go_to(3)">选择三
</h3>
 
 
 
<div class="block">
aaaaaaaaaaaaaaa
 
</div>
 
<div>
bbbbbbbbbbb
 
</div>
 
<div>
ccccccccccccccc
 
</div>
 
 
 
 
 
</div>
 
 
 
 
 
 
</div>
 
 
 
 
 
 
  
<!--   body部分  -->
 
      
 
</body>
</html>我想做到 当点击”选择二“的时候 “b”出现
         当点击“选择三”的时候 “c”出现
上面的代码似乎有问题，请大家检查检查。JavaScriptHTML编程类

解决方案 »

  1.   

    var h = document.getElementById("tab").getElementsByTagName("h3"); 
    var d = document.getElementById("tab").getElementsByTagName("div");
    放到你的go_to方法里
    还有是
    getElementsByTagName
      

  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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>dfsdf</title> 
       
    <script>   function go_to(ao) 
     {  
    var d = document.getElementById("tab").getElementsByTagName("div"); 
    var h=d.length;
         for(var i=0; i<h;i++) 
           
         { 
             if(ao-1==i) 
             { 
                 d[i].style.display="block"; 
                   
                 } 
     else{
     d[i].style.display="none"; 
     }
               
             } 
           
           
           
         } 
       
       
       
    </script> 
       
       
       
       
       
    <style>  
       
       
       
       
       
       
       
    /*  body  */ 
       
    .bodv_div { width:1000px; background-color:#F99; margin:0 auto;} 
    .first_div{} 
    .language_title { width:1000px; height:20px; background-color: #39F} 
    #tab { width:1000px; height:100px; background-color:#FF3} 
       
    #tab h3{float:left; width:120px; height:26px; line-height:26px; margin:0; font-size:12px; cursor:pointer; text-align:center; color:red; background-color:#CCC} 
       
       
       
    #tab div{display:none;} 
    #tab .block1{display:block;} 
    #tab div{ height:60px; width:1000px; background-color:#FC9; clear:both} 
       
       
       
    </style> 
    </head> 
    <body> 
       
       
       
    <!--  head  -->
       
       
    <!--   body  -->
    <div class="bodv_div"> 
       
    <div class="language_title">ҳ</div> 
       
       
       
    <!--   body ʾ  -->
       
    <div id="tab"> 
    <h3 onclick="go_to(1)">tab_1
    </h3> 
       
       
    <h3 onclick="go_to(2)">tab_2
    </h3> 
       
    <h3 onclick="go_to(3)">tab_3
    </h3> 
       
       
       
    <div class="block1"> 
    aaaaaaaaaaaaaaa 
       
    </div> 
       
    <div class="block2"> 
    bbbbbbbbbbb 
       
    </div> 
       
    <div class="block3"> 
    ccccccccccccccc 
       
    </div> 
       
       
       
       
       
    </div> 
       
       
       
       
       
       
    </div> 
       
       
       
       
       
       
        
    <!--   body  -->
       
            
       
    </body> 
    </html> 
    我觉得你这样写会好点，你用js源生代码写classname这个是无法实现的，改用jquery来写就可以，但是如果只是写这个功能的话，用我上边的方法还是挺简单可用的！