效果体验：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>
web前端汇总：http://www.cnblogs.com/jihua/p/webfront.html
新闻热点
疑难解答
