效果體驗：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>