读书人

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

发布时间: 2013-07-04 11:45:32 作者: rapoo

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

<!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

热点推荐