效果體驗：http://hovertree.com/texiao/js/3.htm
該效果使用純JavaScript代碼，實現TAB頁切換效果，TAB標簽根據內容自適應寬度，點擊TAB標簽切換內容頁。
HTML文件代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS實現自適應寬度的Tag切換 - HoverTree</title><base target="_blank" /> <style type="text/css"> #hovertreecon { FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px; } #hovertreecon a {font-size:14px;line-height:20px; color:blue;text-decoration:none;} #hovertreetags { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px; } #hovertreetags LI { BACKGROUND: url(http://hovertree.com/texiao/js/3/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px; } #hovertreetags LI A { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(http://hovertree.com/texiao/js/3/tagright.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none; } #hovertreetags LI.emptyTag { BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px; } #hovertreetags LI.hovertreeSelectTag { BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px; } #hovertreetags LI.hovertreeSelectTag A { BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px; } #hovertreeContent { BORDER-RIGHT: #aecbd4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #aecbd4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #aecbd4 1px solid; BACKGROUND-COLOR: #fff; } #hovertreeContent DIV.hovertreeSelectTag { DISPLAY: block; } .hovertreeTagContent { PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(http://hovertree.com/texiao/js/3/bg.gif) repeat-x; PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px; } </style> </head> <body> <div id="hovertreecon"> <ul id="hovertreetags"> <li> <a onclick="hovertreeSelectTag('hovertreeTagContent0',this)" href="javascript:void(0)">標簽一</a> </li> <li class="hovertreeSelectTag"> <a onclick="hovertreeSelectTag('hovertreeTagContent1',this)" href="javascript:void(0)">標簽二</a> </li> <li> <a onclick="hovertreeSelectTag('hovertreeTagContent2',this)" href="javascript:void(0)">自適應寬度的標簽</a> </li> </ul> <div id="hovertreeContent"> <div class="hovertreeTagContent" id="hovertreeTagContent0">第一個標簽的內容<br /> <ul style="list-style:none;"><li><a href="http://hovertree.com/hvtart/bjae/nh0pk7kc.htm">網頁頂部定時收起廣告jQuery特效</a></li><li><a href="http://hovertree.com/hvtart/bjae/g71ha4qs.htm">簡潔的HTML+CSS下拉菜單</a></li><li><a href="http://hovertree.com/hvtart/bjae/009i1gl6.htm">CSS帶說明信息導航菜單</a></li><li><a href="http://hovertree.com/hvtart/bjae/5w5svpu4.htm">HoverTree帶說明的CSS菜單</a></li><li><a href="http://hovertree.com/hvtart/bjae/f25wc8ik.htm">DIV和LI實現表格</a></li><li><a href="http://hovertree.com/hvtart/bjae/wucpcnjm.htm">JavaScript變換表格邊框顏色</a></li><li><a href="http://hovertree.com/hvtart/bjae/ae553e2f1027d0ff.htm">使用jQuery改變鏈接的顏色</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery圖片列表鼠標經過遮罩顯示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/48fa7b1b3162a7a4.htm">一個簡單的移動端網頁</a></li><li><a href="http://hovertree.com/hvtart/bjae/7f408b3a6bf8a433.htm">jQuery突出圖片列表中鼠標經過項</a></li></ul> </div> <div class="hovertreeTagContent hovertreeSelectTag" id="hovertreeTagContent1">第二個標簽的內容<br /> <ul style="list-style:none;"><li><a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">更多特效</a> <a href="http://hovertree.com/hvtart/bjae/wokffp10.htm">原文</a> <a href="http://hovertree.com/hvtart/bjae/1cijrgj1.htm">jQuery操作select</a></li><li><a href="http://hovertree.com/hvtart/bjae/b6fd7e9e75b8773b.htm">jQ的css() 方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/47ce00836ac8b662.htm">jQuery的幾個特點</a></li><li><a href="http://hovertree.com/hvtart/bjae/b6f6650a1b6ce369.htm">jQuery的發展和應用</a></li><li><a href="http://hovertree.com/hvtart/bjae/a3fc809e13e1157e.htm">jquery通過HTML標簽實現控件隱藏</a></li><li><a href="http://hovertree.com/hvtart/bjae/5aac47a87eb2a3c2.htm">盤點jQuery棄用的函數</a></li><li><a href="http://hovertree.com/hvtart/bjae/c5a746a2d25d43b7.htm">jQuery 屬性操作 - attr() 方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/e367418912caa0b8.htm">JQuery實現錨點平滑滾動</a></li><li><a href="http://hovertree.com/hvtart/bjae/e23e16b491f3cae2.htm">關於Jquery中的$.each獲取各種返回類型數據的使用方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/fa1cb9dc2e859da8.htm">jQuery使用的8個經驗技巧</a></li></ul> </div> <div class="hovertreeTagContent" id="hovertreeTagContent2">第三個標簽的內容 <br /> <ul style="list-style:none;"><li><a href="http://hovertree.com/hvtart/bjae/bvnsa1gk.htm">div標簽嵌套浮動div標簽時無法撐開外部div的解決辦法</a></li><li><a href="http://hovertree.com/hvtart/bjae/kl77symv.htm">web前端開發之編寫高質量代碼</a></li><li><a href="http://hovertree.com/hvtart/bjae/nf4w1l0h.htm">3個有用的css小知識</a></li><li><a href="http://hovertree.com/hvtart/bjae/ia0qi2nv.htm">用CSS設置Table的細邊框的最好用的方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/usi4p1v9.htm">如何利用CSS中的ime-mode用來控制頁面上文本框中的全角/半角輸入</a></li><li><a href="http://hovertree.com/hvtart/bjae/j2w0mylg.htm">CSS選擇器介紹</a></li><li><a href="http://hovertree.com/hvtart/bjae/isnqi1t4.htm"> Css中的兩個重要概念：塊狀元素和內聯元素</a></li><li><a href="http://hovertree.com/hvtart/bjae/v8e7w4u1.htm">偽類link,hover,active,visited,focus的區別</a></li><li><a href="http://hovertree.com/hvtart/bjae/alaxpy6v.htm">實例看padding與margin的區別</a></li><li><a href="http://hovertree.com/hvtart/bjae/4a41528072f21543.htm">div+css頁面居中代碼</a></li></ul> </div> </div> </div> <script> function hovertreeSelectTag(showContent, selfObj) { // 操作標簽 var tag = document.getElementById("hovertreetags").getElementsByTagName("li"); var taglength = tag.length; for (i = 0; i < taglength; i++) { tag[i].className = ""; } selfObj.parentNode.className = "hovertreeSelectTag"; // 操作內容 for (i = 0; j = document.getElementById("hovertreeTagContent" + i) ; i++) { j.style.display = "none"; } document.getElementById(showContent).style.display = "block"; } </script> </body> </html>