两种均是直接放到代码里面就可以用，大家有兴趣，还可以拿来修改一下，改成自己喜欢的样式
方法一：
程序代码
方法二：
程序代码
方法一：
程序代码
<style type=text/css>
td {
font-size: 12px;
color: #000000;
line-height: 150%;
}
.sec1 {
background-color: #EEEEEE;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid #FFFFFF
}
.sec2 {
background-color: #D4D0C8;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
font-weight: bold;
}
.main_tab {
background-color: #D4D0C8;
color: #000000;
border-left:1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
<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 border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
<tr height=20 align=center>
<td class=sec2 width=10% οnclick="secBoard(0)">关于TBODY标记</td>
<td class=sec1 width=10% οnclick="secBoard(1)">关于cells集合</td>
<td class=sec1 width=10% οnclick="secBoard(2)">关于tBodies集合</td>
<td class=sec1 width=10% οnclick="secBoard(3)">关于display属性</td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab>
<tbody style="display:block;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容，略去。1 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容，略去。2 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容，略去。3 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容，略去。4 </td>
</tr>
</tbody>
</table>
td {
font-size: 12px;
color: #000000;
line-height: 150%;
}
.sec1 {
background-color: #EEEEEE;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid #FFFFFF
}
.sec2 {
background-color: #D4D0C8;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
font-weight: bold;
}
.main_tab {
background-color: #D4D0C8;
color: #000000;
border-left:1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
<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 border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
<tr height=20 align=center>
<td class=sec2 width=10% οnclick="secBoard(0)">关于TBODY标记</td>
<td class=sec1 width=10% οnclick="secBoard(1)">关于cells集合</td>
<td class=sec1 width=10% οnclick="secBoard(2)">关于tBodies集合</td>
<td class=sec1 width=10% οnclick="secBoard(3)">关于display属性</td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab>
<tbody style="display:block;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容，略去。1 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容，略去。2 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容，略去。3 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容，略去。4 </td>
</tr>
</tbody>
</table>
方法二：
程序代码
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.menu1 {
font-family: "宋体";
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #990000;
cursor:hand;
}
.menu2 {
font-family: "宋体";
font-size: 14px;
font-weight: bold;
color: #990000;
text-decoration: none;
background-color: #FFFFFF;
cursor:hand;
}-->
</style>
<script language="JavaScript">
function tabit(id,cid) {
tab1.className="menu2";
tab2.className="menu2";
id.className="menu1";
ctab1.style.display="none";
ctab2.style.display="none";
cid.style.display="block";
}
</script>
</head>
<body οnlοad="tabit(tab1,ctab1)">
<table width="400" height="169" border="0" cellpadding="3" cellspacing="1" bgcolor="#990000">
<tr>
<td height="20" class="menu1" id="tab1" οnclick="tabit(tab1,ctab1)">菜单一</td>
<td height="20" class="menu2" id="tab2" οnclick="tabit(tab2,ctab2)">菜单二</td>
</tr>
<tr id="ctab1" style="display:none">
<td height="100" colspan="2" bgcolor="#FFFFFF">显示出1</td>
</tr>
<tr id="ctab2" style="display:none">
<td height="100" colspan="2" bgcolor="#FFFFFF">显示出2</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.menu1 {
font-family: "宋体";
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #990000;
cursor:hand;
}
.menu2 {
font-family: "宋体";
font-size: 14px;
font-weight: bold;
color: #990000;
text-decoration: none;
background-color: #FFFFFF;
cursor:hand;
}-->
</style>
<script language="JavaScript">
function tabit(id,cid) {
tab1.className="menu2";
tab2.className="menu2";
id.className="menu1";
ctab1.style.display="none";
ctab2.style.display="none";
cid.style.display="block";
}
</script>
</head>
<body οnlοad="tabit(tab1,ctab1)">
<table width="400" height="169" border="0" cellpadding="3" cellspacing="1" bgcolor="#990000">
<tr>
<td height="20" class="menu1" id="tab1" οnclick="tabit(tab1,ctab1)">菜单一</td>
<td height="20" class="menu2" id="tab2" οnclick="tabit(tab2,ctab2)">菜单二</td>
</tr>
<tr id="ctab1" style="display:none">
<td height="100" colspan="2" bgcolor="#FFFFFF">显示出1</td>
</tr>
<tr id="ctab2" style="display:none">
<td height="100" colspan="2" bgcolor="#FFFFFF">显示出2</td>
</tr>
</table>
</body>
</html>
扫一扫
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
