類似於網易的動態切換效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TEST.html</title>
<style type="text/css">
body {
font-size: 12px;
line-height: 150%;
}
table {
font-size: 12px;
line-height: 150%;
}
a:link {
color: #000;
text-decoration: none
}
a:visited {
color: #000;
text-decoration: none
}
a:active {
color: #000;
text-decoration: none
}
a:hover {
color: #ff0000;
text-decoration: underline
}
.s01 {
border: #6BA6DE 1px solid;
border-bottom: 0px;
background: #eff7ff;
padding-top: 1px
}
.s02 {
border: #ffffff 1px solid;
border-bottom: #6BA6DE 1px solid;
background: #ffffff;
}
</style>
<script language="javascript">
function secBoard(n)
{
for(i=1;i<5;i++)
{
eval("document.getElementById('cl0"+i+"').className='s02'");
eval("tbx0"+i+".style.display='none'");
}
eval("document.getElementById('cl0"+n+"').className='s01'");
eval("tbx0"+n+".style.display='block'");
}
</script>
</head>
<body>
<table width="247" border="0" cellpadding="0" cellspacing="0"
id="secTable">
<tr align="center">
<td id="cl01" width="60" class="s01" onClick="secBoard(1);"
style="cursor: hand">
選項卡1
</td>
<td id="cl02" width="60" class="s02" onClick="secBoard(2);"
style="cursor: hand">
選項卡2
</td>
<td id="cl03" width="60" class="s02" onClick="secBoard(3);"
style="cursor: hand">
選項卡3
</td>
<td id="cl04" width="60" class="s02" onClick="secBoard(4);"
style="cursor: hand">
選項卡4
</td>
</tr>
</table>
<table width="247" height="200"
style="border: #6BA6DE 1px solid; border-top: 0px;">
<tr>
<td height="20">
這還可以放固定不變的東西，如果要加上，去掉註釋符
</td>
</tr>
<tr>
<td valign="top" style="padding-top: 5px;">
<div style="display: " id="tbx01">
這個裏面可以放你需要的東西，如果有多個選項卡的話可以適量修改代碼就可以了
</div>
<div style="display: none; height: 300" id="tbx02">
具體的大小你自己調，我這做的很明顯，注意上面表格和下面表格寬度要一樣，下面一個表格的高度隨便改，最好手動修改本代碼，即不要用 DW
等工具調大小
</div>
<div style="display: none; height: 400" id="tbx03">
所有的樣式呀什麼的，你都可以自己改，不懂的再問我
</div>
<div style="display: none;" id="tbx04">
嘿嘿，專爲
<font color="#ff0000">.....</font> 設計製作
</div>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>TEST.html</title>
<style type="text/css">
body {
font-size: 12px;
line-height: 150%;
}
table {
font-size: 12px;
line-height: 150%;
}
a:link {
color: #000;
text-decoration: none
}
a:visited {
color: #000;
text-decoration: none
}
a:active {
color: #000;
text-decoration: none
}
a:hover {
color: #ff0000;
text-decoration: underline
}
.s01 {
border: #6BA6DE 1px solid;
border-bottom: 0px;
background: #eff7ff;
padding-top: 1px
}
.s02 {
border: #ffffff 1px solid;
border-bottom: #6BA6DE 1px solid;
background: #ffffff;
}
</style>
<script language="javascript">
function secBoard(n)
{
for(i=1;i<5;i++)
{
eval("document.getElementById('cl0"+i+"').className='s02'");
eval("tbx0"+i+".style.display='none'");
}
eval("document.getElementById('cl0"+n+"').className='s01'");
eval("tbx0"+n+".style.display='block'");
}
</script>
</head>
<body>
<table width="247" border="0" cellpadding="0" cellspacing="0"
id="secTable">
<tr align="center">
<td id="cl01" width="60" class="s01" onClick="secBoard(1);"
style="cursor: hand">
選項卡1
</td>
<td id="cl02" width="60" class="s02" onClick="secBoard(2);"
style="cursor: hand">
選項卡2
</td>
<td id="cl03" width="60" class="s02" onClick="secBoard(3);"
style="cursor: hand">
選項卡3
</td>
<td id="cl04" width="60" class="s02" onClick="secBoard(4);"
style="cursor: hand">
選項卡4
</td>
</tr>
</table>
<table width="247" height="200"
style="border: #6BA6DE 1px solid; border-top: 0px;">
<tr>
<td height="20">
這還可以放固定不變的東西，如果要加上，去掉註釋符
</td>
</tr>
<tr>
<td valign="top" style="padding-top: 5px;">
<div style="display: " id="tbx01">
這個裏面可以放你需要的東西，如果有多個選項卡的話可以適量修改代碼就可以了
</div>
<div style="display: none; height: 300" id="tbx02">
具體的大小你自己調，我這做的很明顯，注意上面表格和下面表格寬度要一樣，下面一個表格的高度隨便改，最好手動修改本代碼，即不要用 DW
等工具調大小
</div>
<div style="display: none; height: 400" id="tbx03">
所有的樣式呀什麼的，你都可以自己改，不懂的再問我
</div>
<div style="display: none;" id="tbx04">
嘿嘿，專爲
<font color="#ff0000">.....</font> 設計製作
</div>
</td>
</tr>
</table>
</body>
</html>