设计之家 > 教程 > 網頁教程 > HTML教程 >

一種簡潔的選項卡效果代碼

作者：佚名　來源：網絡　時間：2007-10-29

　　選項卡原身是Windows操作系統的一個創意，即通過交換選項，讓很多項目信息輪替顯示在大小和位置都固定的小塊區域里。因此選項卡具有占用篇幅小，輻射內容大的特點。一個典型的例子是你打開IE瀏覽器，依次點擊“工具”-“Internet選項”，這個表單就是一個選項卡典型布局。當然了，這里所說的選項卡效果是要在Web頁面實現的，并非應用程序里的菜單選項，在網頁中應用選項卡可以使網頁顯得更緊湊，結合AJAX技術可以使頁面在有限的空間內展現更多的內容。本文主要介紹一種簡潔的選項卡效果的實現，兼容性較好，方便大家直接使用。

<style type="text/css"> body { margin:0px; text-align:center; font-size:12px; } #divall { margin:auto; margin-top:35px; width:300px; height:200px; background-color:#7DA7D9; border:0px; } #title { width:300px; height:20px; font-size:14px; margin-top:4px; } #table1 table { width:300px; height:30px; font-size:12px; } #table2 table { width:300px; height:30px; font-size:12px; } #content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 { margin:auto; height:110px; width:290px; background-color:#eee; position:relative; } #content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div { position:absolute; bottom:3px; right:3px; cursor:pointer; } a { text-decoration:none; } .changebordercolor { border-top:1px solid #369; border-left:1px solid #369; } .backbordercolor { border:0px solid red; } </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" } function aa5(){ 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="block" document.getElementById("content6").style.display="none" } function 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> <tr align=center> <td onMouseOver="this.bgColor='#33ccff';aa1();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> <td onMouseOver="this.bgColor='#33ccff';aa2();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> <td onMouseOver="this.bgColor='#33ccff';aa3();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</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> <tr align=center> <td onMouseOver="this.bgColor='#33ccff';aa4();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> <td onMouseOver="this.bgColor='#33ccff';aa5();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</a></td> <td onMouseOver="this.bgColor='#33ccff';aa6();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.sj33.cn">設計之家</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>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

标签：

上一篇
iframe的高度隨內容變化而變化的代碼

下一篇
HTML語法效果

相關文章：

推薦設計

優秀海報設計精選集（8）海報設計2022-09-23
充滿自然光線！32平米精致裝修設計2022-08-14
親愛的圖書館 | VERSE雜誌版版式設計2022-07-11
生活，就該這麼愛！2022天海報設計2022-06-02

最新文章

帶你輕鬆打開SVG動畫的大HTML教程2016-06-08
36個重要的HTML標簽HTML教程2012-05-15
10個最容易犯的HTML標簽錯HTML教程2010-09-11
border:none;與border:0;的區別HTML教程2009-11-26