一款兼容性很好的tab标签选项卡 兼容IE7、IE8、FF等主流浏览器的多标签选项卡，基于CSS+JS技术实现，简洁漂亮，千万不要错过，用到一张背景图片，您可以自行下载到本地，本选项卡是大网站扒下的，而且好多网站都有用过，绝对值得收藏的一款点触式滑动门。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>一款兼容性很好的tab标签选项卡</title> <style type="text/css"> body{ font-family: arial; font-size: 12px; text-align: center; margin: 0; } .nTab{ float: left; width: 542px; margin: 0 auto; border-bottom:1px #C7C7CD solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 26px; overflow: hidden; } .nTab .TabTitle ul{ margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 60px; cursor: pointer; padding-top: 6px; padding-right: 0px; padding-left: 0px; padding-bottom: 7px; list-style-type: none; } .nTab .TabTitle .active{ background:url(http://www.CsrCode.cn/html/txdm_2/images/tab_bg1.gif) left -25px no-repeat;border-left:1px #C7C7CD solid;border-top:1px #C7C7CD solid;border-bottom:1px #fff solid;} .nTab .TabTitle .normal{ background:url(http://www.CsrCode.cn/html/txdm_2/images/tab_bg1.gif);border-top:1px #C7C7CD solid;border-bottom:1px #C7C7CD solid;} .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #C7C7CD solid;border-left:1px #C7C7CD solid; } .none {display:none;} </style> <script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++) { if (i == Num) { thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script> </head> <body> <br /> <br /> <center> <div style="text-align:center; margin-left:200px;"> <!-- 选项卡开始 --> <div class="nTab"> <!-- 标题开始 --> <div class="TabTitle"> <ul id="myTab0"> <li class="active" onclick="nTabs(this,0);">本站.首页</li> <li class="normal" onclick="nTabs(this,1);">seo.优化</li> <li class="normal" onclick="nTabs(this,2);">免费.空间</li> <li class="normal" onclick="nTabs(this,3);">网页特效1</li> <li class="normal" onclick="nTabs(this,4);">网页特效2</li> <li class="normal" onclick="nTabs(this,5);">网页特效3</li> <li class="normal" onclick="nTabs(this,6);">推广.赚钱</li> <li class="normal" onclick="nTabs(this,7);">源码.下载</li> <li class="normal" onclick="nTabs(this,8);">交换.链接</li> </ul> </div> <!-- 内容开始 --> <div class="TabContent"> <div id="myTab0_Content0">本特效由 <a href="http://www.update8.com">技术网网页特效</a>只为兴趣与学习交流，不作商业用途。</div> <div id="myTab0_Content1" class="none"><a href="http://www.update8.com/design">seo.优化</a></div> <div id="myTab0_Content2" class="none"><a href="http://www.update8.com">免费.空间</a></div> <div id="myTab0_Content3" class="none"><a href="http://www.update8.com" title="">菜单导航特效</a> <a href="http://www.update8.com" title="">图层样式特效</a> <a href="http://www.CsrCode.cn/html/txdm/ljwb/" title="">链接文本特效</a> <a href="http://www.update8.com" title="">图形图像特效</a></div> <div id="myTab0_Content4" class="none"><a href="http://www.update8.com" title="">鼠标特效.代码</a> <a href="http://www.update8.com" title="">页面窗口特效</a> <a href="http://www.update8.com" title="">网页背景特效</a> <a href="http://www.update8.com" title="">日期时间特效</a></div> <div id="myTab0_Content5" class="none"><a href="http://www.update8.com" title="">页面搜索特效</a> <a href="http://www.update8.com" title="">表格表单特效</a> <a href="http://www.update8.com" title="">其他网页特效</a> <a href="http://www.CsrCode.cn/html/txdm/ztltx/" title="">状态栏特效</a></div> <div id="myTab0_Content6" class="none"><a href="http://www.update8.com">猪八戒网</a> <a href="http://www.update8.com">千脑网盘</a></div> <div id="myTab0_Content7" class="none"><a href="http://www.update8.com" title="">淘客源码下载</a> <a href="http://www.update8.com" title="">CMS系统源码</a></div> <div id="myTab0_Content8" class="none"><a href="http://www.update8.com/">友情链接交换平台</a></div> </div> </div> <!-- 选项卡结束 --> </div> </center> </body> </html> <br><br><br><br><br><br><br><br> <p align="center">本特效由 <a href="http://www.update8.com">技术网网页特效</a>只为兴趣与学习交流，不作商业用途。来源：源码爱好者</p> 提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
