如何把<table><tbody><td>换成<div><ul><li>
<SCRIPTlanguage=javascript> functionsecBoard(n)&nb...
<SCRIPT language=javascript> function secBoard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2"; for(i=0;i<mainTable.tBodies.length;i++) mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block"; } </SCRIPT> <TABLE id=secTable > <TD class=zh2 onclick=secBoard(0) width="10%">动态一</TD> <TD class=zh1 onclick=secBoard(1) width="10%">动态二</TD> <TD class=zh1 onclick=secBoard(2) width="10%">动态三</TD> <TD class=zh1 onclick=secBoard(3) width="10%">动态四</TD></TABLE> <table id=mainTable > <TD>动态显示一</TD> <TBODY style="DISPLAY: none"><TD >动态显示二</TD></TBODY> <TBODY style="DISPLAY: none"><TD>动态显示三</TD></TBODY> <TBODY style="DISPLAY: none"><TD >动态显示四</td></TBODY></table>
展开
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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAB选项</title>
<script type="text/javascript">
/*更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
img {border:0px;}
#tabs1{text-align:left;width:500px;position:relative;}/* 相当于父层，要设具体宽度*/
.menu1box{float:left;height:26px;width:400px;text-align:left;}
#menu1{top:10px;left:0px;z-index:1;width:400px;display:inline;}
#menu1 li{float:left;display:block;cursor:pointer;width:60px;text-align:center;line-height:24px;height:24px;padding-top:2px;
border-bottom: none;font-size:14px;display:inline;margin-right: 4px;margin-left: 4px;}
#menu1 li.hover{color: #FF0000;/*这个颜色就是点击后显示的颜色*/font-weight:bold;display:inline;}/*这个必要的*/
.main1{clear:both;padding:0px;text-align:left;}
.main1box{clear:both;border-top:1px solid #E4E4E4;height:auto;width:100%;float:left;overflow:hidden;}
#main1 ul{display: none;text-align:left;float:left;}
#main1 li{text-align:left;float:left;margin:0 0;}
#main1 ul.block{display: block;float:left;margin:0 0;padding:0 0;}/*这个也必要的*/
-->
</style>
</head>
<body>
<div id="tabs1">
<div class="menu1box">
<ul id="menu1" name="menu1"> <!--id="menu1" name="menu1"不一定就要放在<ul>里面当<ul>必须要有-->
<li class="hover" onclick="setTab(1,0)">一</li> <!--第一个设class="hover"就行-->
<li onclick="setTab(1,1)">二</li>
<li onclick="setTab(1,2)">三</li>
<li onclick="setTab(1,3)">四</li>
<li onclick="setTab(1,4)">五</li><!--再多就是onclick="setTab(1,5)"，看需求添加；但必须是setTab(1,0)做第一个-->
</ul>
</div>
<div class="main1box">
<div class="main1" id="main1">
<ul class="block"><li>一</li></ul><!--也是第一个设class="block"，如果都设初次加载会把一二三四五都显示出来的-->
<ul ><li>二</li></ul>
<ul ><li>三</li></ul>
<ul ><li>四</li></ul>
<ul><li>五</li></ul><!--上面有几个li,这里就要有几个<ul ><li>...</li></ul>，显示的内容页要一一对应的写-->
</div>
</div>
</div>
</body>
</html>
代码很详细，应该能看懂，全部复制预览应该可以看到效果；
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAB选项</title>
<script type="text/javascript">
/*更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
img {border:0px;}
#tabs1{text-align:left;width:500px;position:relative;}/* 相当于父层，要设具体宽度*/
.menu1box{float:left;height:26px;width:400px;text-align:left;}
#menu1{top:10px;left:0px;z-index:1;width:400px;display:inline;}
#menu1 li{float:left;display:block;cursor:pointer;width:60px;text-align:center;line-height:24px;height:24px;padding-top:2px;
border-bottom: none;font-size:14px;display:inline;margin-right: 4px;margin-left: 4px;}
#menu1 li.hover{color: #FF0000;/*这个颜色就是点击后显示的颜色*/font-weight:bold;display:inline;}/*这个必要的*/
.main1{clear:both;padding:0px;text-align:left;}
.main1box{clear:both;border-top:1px solid #E4E4E4;height:auto;width:100%;float:left;overflow:hidden;}
#main1 ul{display: none;text-align:left;float:left;}
#main1 li{text-align:left;float:left;margin:0 0;}
#main1 ul.block{display: block;float:left;margin:0 0;padding:0 0;}/*这个也必要的*/
-->
</style>
</head>
<body>
<div id="tabs1">
<div class="menu1box">
<ul id="menu1" name="menu1"> <!--id="menu1" name="menu1"不一定就要放在<ul>里面当<ul>必须要有-->
<li class="hover" onclick="setTab(1,0)">一</li> <!--第一个设class="hover"就行-->
<li onclick="setTab(1,1)">二</li>
<li onclick="setTab(1,2)">三</li>
<li onclick="setTab(1,3)">四</li>
<li onclick="setTab(1,4)">五</li><!--再多就是onclick="setTab(1,5)"，看需求添加；但必须是setTab(1,0)做第一个-->
</ul>
</div>
<div class="main1box">
<div class="main1" id="main1">
<ul class="block"><li>一</li></ul><!--也是第一个设class="block"，如果都设初次加载会把一二三四五都显示出来的-->
<ul ><li>二</li></ul>
<ul ><li>三</li></ul>
<ul ><li>四</li></ul>
<ul><li>五</li></ul><!--上面有几个li,这里就要有几个<ul ><li>...</li></ul>，显示的内容页要一一对应的写-->
</div>
</div>
</div>
</body>
</html>
代码很详细，应该能看懂，全部复制预览应该可以看到效果；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
