中文(繁体)
一個不錯的適合作分類的選項卡效果程式碼
<style type="text/css"> body { margin:0px;文字對齊：居中；字體大小：12px； } #divall { 邊距：自動；上邊距：35px；寬度：300px；高度：200px；背景顏色：#7DA7D9；邊框：0px； } #title { 寬度：300px;高度：20px；字體大小：14px；上邊距：4px； } #table1 表 { width:300px;高度：30px；字體大小：12px； } #table2 表 { width:300px;高度：30px；字體大小：12px； } #content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 { 邊距: 自動;高度：110px；寬度：290px；背景顏色：#eee；職位：親屬； } #content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div { 位置：絕對；底部：3px；右：3px；遊標：指針； } a { 文字裝飾：無； } .changebordercolor { 頂部邊框：1px 實心 #369;左邊框：1px 實線#369； } .backbordercolor { 邊框：0px 純紅色； } </style> <script language="javascript"> function msg(){ document.getElementById("msg1").style.display="none" document.getElementById("msg2").style.display="none" } function msgnone(ms,cont){ document.getElementById(ms).style.display='block' document.getElementById(cont).style.display='none' } function aa1(){ document.getElementById("content1" ).style.display="block" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4"). style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa2(){ document.getElementById(" content1").style.display="none" document.getElementById("content2").style.display="block" document.getElementById("content3").style.display="none" document.getElementById("content4" ).style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa3(){ document.getElementById ("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="block" document.getElementById(" content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa4(){ document .getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById ("content4").style.display="block" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } 函數aa5() { document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" 文件.getElementById("content4").style.display="none" document.getElementById("content5").style.display="block" document.getElementById("content6").style.display="none" } 函數aa6 (){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none " document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="block" } </script> <body onLoad="aa1();msg()"> <div id="divall"> <div id="title">分類類型</div> <div id="table1"> <table cellpadding=0 cellspacing=0 boder=0> <tralign=center> <td onMouseOver="this.bgColor='#33ccff';aa1();msg();this.className='changebordercolor'" onMouseOut="this . bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.baidu.com">遊戲下載</a></td> <td onMouseOver="this. bgColor ='#33ccff';aa2();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http : //www.baidu.com">遊戲下載</a></td> <td onMouseOver="this.bgColor='#33ccff';aa3();msg();this.className='changebordercolor'" onMouseOut ="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.baidu.com">遊戲下載</a></td> </tr > </table></div> <div id="content1">第一個裡面的內容<div onClick="msgnone('msg1','content1')">關閉</div></div> < div id="content2">第二個裡面的內容<div onClick="msgnone('msg1','content2')">關閉</div></div> <div id="content3">第三個裡面的內容<div onClick="msgnone('msg1','content3')">關閉</div></div> <div id="msg1">沒有選擇類型</div> <div id="table2 " > <table cellpadding=0 cellspacing=0 boder=0> <tralign=center> <td onMouseOver="this.bgColor='#33ccff';aa4();msg();this.className='changebordercolor'" onMouseOut== "this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.baidu.com">遊戲下載</a></td> <td onMouseOver =" this.bgColor='#33ccff';aa5();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href= "http://www.baidu.com">遊戲下載</a></td> <td onMouseOver="this.bgColor='#33ccff';aa6();msg();this.className= 'changebordercolor '" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.baidu.com">遊戲下載</a></td > < /tr></table></div> <div id="content4">第四個裡面的內容<div onClick="msgnone('msg3','content4')">關閉</div>< /div > <div id="content5">第五個裡面的內容<div onClick="msgnone('msg2','content5')">關閉</div></div> <div id="content6" >第六個裡面的內容<div onClick="msgnone('msg2','content6')">關閉</div></div> <div id="msg2">沒有選擇類型</div> </ div> </body>
