選項卡 五

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<base href="http://www.cn-lan.com/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<script language="JavaScript">
var txtstr_1="&nbsp;&nbsp;QQ:28983016  Email:<a href=mailto:[email protected]>[email protected]</a>";
var txtstr_2="&nbsp;&nbsp;需要軟件的朋友可以與我聯繫。";
var txtstr_3="&nbsp;&nbsp;論壇現在暫時關閉,請朋友們在QQ上聯繫."
var txtstr_4="&nbsp;&nbsp;孤獨的時候便走向自然;<br>寂寞的時候便走向音樂;<br>失敗的時候便走向憧憬;<br>委屈的時候便走向創造和友情。<br>"
function changediv(n){
for(i=1;i<=5;i++){
eval("document.getElementById('s'+i+'').className='under'+n+''");
//此次循環的作用是分別將s開頭的ID處的下邊界設置爲相應的顏色
}
for(i=1;i<=4;i++){
eval("document.getElementById('c"+i+"').className='a"+n+"'");
//此次循環初始化所有的選項卡按鈕的背景圖片爲cb0.gif,銀灰色
}
eval("document.getElementById('c"+n+"').className='t"+n+"'");
//然後設置鼠標移動到的相應位置的背景圖片爲相應的圖片,修改對應的樣式表。
eval("document.getElementById('bodyt').className='body"+n+"'");
//修改選項卡下半部的樣式,使其的色彩與上半部的圖片相適應。
bodytxt=eval('txtstr_'+n);
if(bodytxt==""){
alert("數據正在下載,請稍候!");}
else
{
document.getElementById("txt1").innerHTML=bodytxt;
//設置選項卡主體部分相應的文字。
}
}
</script>
<style type="text/css">
<!--
.t1 {
 background-image: url(cb1.gif);
 border-bottom-width: medium;
 border-bottom-style: none;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #88c027;
}
.t2 {
 background-image: url(cb2.gif);
 padding-top: 3px;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #eac751;
}
.t3 {
 background-image: url(cb3.gif);
 padding-top: 3px;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #ee6f69;
}
.t4 {
 background-image: url(cb4.gif);
 padding-top: 3px;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #7eaffb;
}
.t0 {
 background-image: url(cb0.gif);
 padding-top: 3px;
 border-bottom-width: 0px;
 border-bottom-style: none;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #AEABA9;
}
-->
</style>
<style type="text/css">
<!--
td {
 font-size: 12px;
 line-height: 16px;
}
.d1 {
 padding-top: 3px;
 border-bottom-width: medium;
 border-bottom-style: none;
}
.d2{
 padding-top: 3px;
 border-bottom-width: medium;
 border-bottom-style: none;
}
.d3{
 padding-top: 3px;
 border-bottom-width: medium;
 border-bottom-style: none;
}
.d4{
 padding-top: 3px;
 border-bottom-width: medium;
 border-bottom-style: none;
}
.under1 {
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #88c027;
}
.under2 {
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #eac751;
}
.under3 {
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #ee6f69;
}
.under4 {
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #7eaffb;
}
.body1 {
 background-color: #d6efb5;
 border-top: 0px none;
 border-right: 1px solid #88c027;
 border-bottom: 1px solid #88c027;
 border-left: 1px solid #88c027;
}
.body2 {
 background-color:#fff7be;
 border-top: 0px none #eac751;
 border-right: 1px solid #eac751;
 border-bottom: 1px solid #eac751;
 border-left: 1px solid #eac751;
}
.body3 {
 background-color: #ffe5e3;
 border-top: 0px none;
 border-right: 1px solid #ee6f69;
 border-bottom: 1px solid #ee6f69;
 border-left: 1px solid #ee6f69;
}
.body4 {
 background-color: #d4eaff;
 border-top: 0px none;
 border-right: 1px solid #7eaffb;
 border-bottom: 1px solid #7eaffb;
 border-left: 1px solid #7eaffb;
}
.firstunderline {
 border-bottom-width: medium;
 border-bottom-style: none;
}
.bodytop {
 border-top-width: medium;
 border-top-style: none;
}
-->
</style>
<style type="text/css">
<!--
.a1 {
 background-image: url(cb0.gif);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #88c027;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #AEABA9;
}
.a2 {
 background-image: url(cb0.gif);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #eac751;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #AEABA9;
}
.a3 {
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #ee6f69;
 background-image: url(cb0.gif);
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #AEABA9;
}
.a4 {
 background-image: url(cb0.gif);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #7eaffb;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #AEABA9;
}
.temp {
 background-image: url(cb0.gif);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #88c027;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #AEABA9;
}
-->
</style>
</head>

<body>
<table width="294" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr valign="bottom">
    <td id="s1" width="8" height="19" class="under1"><br> </td>
    <td id="c1" width="60" align="center" class="t1" onMouseOver="changediv(1)">我佛山人</td>
    <td id="s2" width="8" class="under1"><br> </td>
    <td id="c2" width="60" align="center" class="temp" onMouseOver="changediv(2)">紅色黑客</td>
    <td id="s3" width="8" class="under1"><br> </td>
    <td id="c3" width="60" align="center" class="temp" onMouseOver="changediv(3)">藍色月光</td>
    <td id="s4" width="8" class="under1"><br> </td>
    <td id="c4"  width="60" align="center" class="temp" onMouseOver="changediv(4)"">孤零飄客</td>
    <td id="s5" width="49" class="under1"><br>
</td>
  </tr>
</table>
<table width="294" height="94" border="0" align="center" cellpadding="0" cellspacing="0" class="body1" id="bodyt"><tbody>
  <tr>
    <td valign="top"><br><div id="txt1">
 <script language="javascript">
 document.write(txtstr_1);
 </script>
 </div>&nbsp;</td>
 
  </tr>
  </tbody>
</table>
<p>&nbsp;</p> 

發佈了166 篇原創文章 · 獲贊 3 · 訪問量 40萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章