如何用js做到滑动效果

libero2014 2013-06-25 08:19:59
<!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”出现


上面的代码似乎有问题,请大家检查检查。
...全文
298 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
libero2014 2013-06-26
  • 打赏
  • 举报
回复
引用 3 楼 a756375788 的回复:

<!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来写就可以,但是如果只是写这个功能的话,用我上边的方法还是挺简单可用的!
大神留个 qq 膜拜
a756375788 2013-06-26
  • 打赏
  • 举报
回复
引用 4 楼 zifang20 的回复:
[quote=引用 3 楼 a756375788 的回复:]

<!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来写就可以,但是如果只是写这个功能的话,用我上边的方法还是挺简单可用的!
大神留个 qq 膜拜[/quote] QQ:610154913
a756375788 2013-06-26
  • 打赏
  • 举报
回复

<!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来写就可以,但是如果只是写这个功能的话,用我上边的方法还是挺简单可用的!
libero2014 2013-06-25
  • 打赏
  • 举报
回复
引用 1 楼 zzgzzg00 的回复:
var h = document.getElementById("tab").getElementsByTagName("h3"); var d = document.getElementById("tab").getElementsByTagName("div"); 放到你的go_to方法里 还有是 getElementsByTagName
能留下你的qq吗? 我不明白你说的 谢谢!!
似梦飞花 2013-06-25
  • 打赏
  • 举报
回复
var h = document.getElementById("tab").getElementsByTagName("h3"); var d = document.getElementById("tab").getElementsByTagName("div"); 放到你的go_to方法里 还有是 getElementsByTagName

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧