怎么让这种分页板块多出现几次，并且互不干扰

2013-07-04

如何让这种分页板块多出现几次，并且互不干扰。!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional

如何让这种分页板块多出现几次，并且互不干扰。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0026)http://127.0.0.1/index.php -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>无标题文档</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<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 {
BACKGROUND-COLOR: #89968b
}
.bodv_div {
BACKGROUND-COLOR: #f99; MARGIN: 0px auto; WIDTH: 1000px
}
.first_div {

}
.language_title {
LINE-HEIGHT: 20px; BACKGROUND-COLOR: #39f; WIDTH: 1000px; HEIGHT: 20px
}
.language_title UL {
PADDING-LEFT: 18px
}
#tab {
BACKGROUND-COLOR: #ff3; WIDTH: 1000px; HEIGHT: 100px
}
#tab H3 {
TEXT-ALIGN: center; LINE-HEIGHT: 26px; BACKGROUND-COLOR: #ccc; MARGIN: 0px; WIDTH: 120px; FLOAT: left; HEIGHT: 26px; COLOR: red; FONT-SIZE: 12px; CURSOR: pointer
}
#tab DIV {
DISPLAY: none
}
#tab .block1 {
DISPLAY: block
}
#tab DIV {
BACKGROUND-COLOR: #fc9; WIDTH: 1000px; HEIGHT: 60px; CLEAR: both
}
#tab {
BACKGROUND-COLOR: #ff3; WIDTH: 1000px; HEIGHT: 100px 
 
}
#tab H3 {
TEXT-ALIGN: center; LINE-HEIGHT: 26px; BACKGROUND-COLOR: #ccc; MARGIN: 0px; WIDTH: 120px; FLOAT: left; HEIGHT: 26px; COLOR: red; FONT-SIZE: 12px; CURSOR: pointer
}
</STYLE>

<META name=GENERATOR content="MSHTML 8.00.7601.17940"></HEAD>
<BODY><!--  head部分  --><!--   body 主体部分 -->
<DIV class=bodv_div><!--   body 内容显示部分 -->
<DIV class=language_title>
<UL>网页制作教程 </UL></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>

我想让这个,类似于id=tab板块,在页面中多出现几次并且互不干扰。
我刚刚学这个不是很懂，请多多指教。
请用最简洁的代码完成这个操作，还有各位留言大神能否留下qq，在下不胜感激。 HTML Go Color 类分页
[解决办法]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0026)http://127.0.0.1/index.php -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>无标题文档</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<script type="text/javascript">  
function go_to(obj,ao) 
{
var d = obj.parentNode.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 {
    BACKGROUND-COLOR: #89968b
}
.bodv_div {
    BACKGROUND-COLOR: #f99; MARGIN: 0px auto; WIDTH: 1000px
}
.first_div {
     
}
.language_title {
    LINE-HEIGHT: 20px; BACKGROUND-COLOR: #39f; WIDTH: 1000px; HEIGHT: 20px
}
.language_title UL {
    PADDING-LEFT: 18px
}
.tab {
    BACKGROUND-COLOR: #ff3; WIDTH: 1000px; HEIGHT: 100px
}
.tab H3 {
    TEXT-ALIGN: center; LINE-HEIGHT: 26px; BACKGROUND-COLOR: #ccc; MARGIN: 0px; WIDTH: 120px; FLOAT: left; HEIGHT: 26px; COLOR: red; FONT-SIZE: 12px; CURSOR: pointer
}
.tab DIV {
    DISPLAY: none
}
.tab .block1 {
    DISPLAY: block
}
.tab DIV {
    BACKGROUND-COLOR: #fc9; WIDTH: 1000px; HEIGHT: 60px; CLEAR: both
}
.tab {
    BACKGROUND-COLOR: #ff3; WIDTH: 1000px; HEIGHT: 100px
}
.tab H3 {
    TEXT-ALIGN: center; LINE-HEIGHT: 26px; BACKGROUND-COLOR: #ccc; MARGIN: 0px; WIDTH: 120px; FLOAT: left; HEIGHT: 26px; COLOR: red; FONT-SIZE: 12px; CURSOR: pointer
}
</STYLE>
<META name=GENERATOR content="MSHTML 8.00.7601.17940"></HEAD>
<BODY><!--  head部分  --><!--   body 主体部分 -->
<DIV class=bodv_div><!--   body 内容显示部分 -->
<DIV class=language_title>
<UL>网页制作教程 </UL></DIV><!--   body 内容显示部分  -->
<DIV class="tab">
<H3 onclick="go_to(this,1);">tab_1 </H3>
<H3 onclick="go_to(this,2);">tab_2 </H3>
<H3 onclick="go_to(this,3);">tab_3 </H3>
<DIV class="block1">aaaaaaaaaaaaaaa </DIV>
<DIV class="block2">bbbbbbbbbbb </DIV>
<DIV class="block3">ccccccccccccccc </DIV>
</DIV>
<br /><br /><br />
<DIV class="tab">
<H3 onclick="go_to(this,1);">tab_1 </H3> 
 
<H3 onclick="go_to(this,2);">tab_2 </H3>
<H3 onclick="go_to(this,3);">tab_3 </H3>
<DIV class="block1">aaaaaaaaaaaaaaa </DIV>
<DIV class="block2">bbbbbbbbbbb </DIV>
<DIV class="block3">ccccccccccccccc </DIV>
</DIV>
<DIV class="tab">
<H3 onclick="go_to(this,1);">tab_1 </H3>
<H3 onclick="go_to(this,2);">tab_2 </H3>
<H3 onclick="go_to(this,3);">tab_3 </H3>
<DIV class="block1">aaaaaaaaaaaaaaa </DIV>
<DIV class="block2">bbbbbbbbbbb </DIV>
<DIV class="block3">ccccccccccccccc </DIV>
</DIV>
</DIV>
<!--   body  -->
</BODY>
</HTML>

热点排行

Ajax

怎么让这种分页板块多出现几次，并且互不干扰