js 多层叠的TAB选项卡

　　HTML：多个导航tag加一个放置默认内容div

　　脚本：以数组的形式给出每个导航对应的html

<!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" xml:lang="zh"> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 <title>多层叠TAB选项卡</title> 
<style type="text/css"> 
.nonstop { width:168px; font-size:12px;margin:auto; border:1px solid #cdcdcd; padding:2px; overflow:hidden; } 
.nonstop span { float:left;_display:inline; cursor:pointer; width:22px; height:14px; background:#cdcdcd url(./img/button.gif) no-repeat -175px top; font-size:10px; line-height:14px; margin:2px 0 0 2px; display:inline; text-align:center; } 
.nonstop span:hover { background:gray; font-weight:bold } 
.nonstop div { height:300px; clear:both; border:1px solid #cdcdcd; border-width:2px 1px; margin-left:2px; overflow:hidden; } 
.nonstop div a { float:left; width:80px; height:40px; background:white; text-align:center; line-height:40px; padding-top:8px; margin:1px 0 0 1px; } 
.nonstop div a img { border:0; } 
.nonstop span.hot { border:1px solid red; width:20px; color:white; height:15px; background:red url(./img/button.gif) no-repeat -175px -14px; font-weight:bold; border-bottom:none; } 
</style> 
</head> 
<body> 
一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。
HTML：多个导航tag加一个放置默认内容div
脚本：以数组的形式给出每个导航对应的html 
 <div class="nonstop" id="a2zbox"> 
 ABCDEFG 
 HI JMLNO 
 PSTUYZ! 
 <div> 
 这里放一些默认内容 
 11111111 
 </div> 
 </div> 
 <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F20%E4%B8%AA%E5%AD%97%E6%AF%8D%E4%B8%8B%E7%9A%84%E5%93%81%E7%89%8C%EF%BC%8C%E4%B8%8D%E5%8C%85%E5%90%AB%E9%BB%98%E8%AE%A4%E6%98%BE%E7%A4%BA%E7%9A%84%E5%86%85%E5%AE%B9%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20contHtml%20%3D%20%5B'a1'%2C'b2'%2C'c3'%2C'd4'%2C'e5'%2C'f6'%2C'g7'%2C'h21'%2C'i22'%2C'j23'%2C'm24'%2C'l25'%2C'n26'%2C'o27'%2C'p11'%2C's12'%2C't13'%2C'u14'%2C'y15'%2C'z16'%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20a2zBox%20%3D%20document.getElementById(%22a2zbox%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20a2zTag%20%3D%20a2zBox.getElementsByTagName(%22span%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20a2zCont%20%3D%20a2zBox.getElementsByTagName(%22div%22)%5B0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20divs%20%3D%20%5B%5D%2CcolN%3DMath.floor(a2zCont.clientWidth%2F(a2zTag%5B0%5D.clientWidth))%2F%2F7%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(var%20n%3D1%3B%20n%3Ca2zTag.length%2FcolN%3B%20n%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs%5Bn-1%5D%20%3D%20document.createElement(%22div%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs%5Bn-1%5D.style.display%20%3D%20%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20a2zBox.insertBefore(divs%5Bn-1%5D%2Ca2zTag%5BcolN*n%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs.push(a2zCont)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20hotbox%20%3D%20divs.length-1%3B%2F%2F%E5%88%9D%E5%A7%8B%E5%86%85%E5%AE%B9div%20ID%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20hotboxH%20%3D%20a2zCont.clientHeight%3B%20%2F%2F%E5%86%85%E5%AE%B9div%E9%AB%98%E5%BA%A6%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20hotboxHtemp%20%3D%20hotboxH%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20time%20%3D%2050%2C%20space%20%3D%20100%3B%2F%2F%E6%BB%91%E5%8A%A8%E9%80%9F%E5%BA%A6%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contHtml.push(a2zCont.innerHTML)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function%20TABS(T)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(%20i%3D0%3B%20i%3Ca2zTag.length%3B%20i%2B%2B%20)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fa2zTag%5Bi%5D.removeAttribute(%22class%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20a2zTag%5Bi%5D.className%3D%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20a2zTag%5BT%5D.className%20%3D%20%22hot%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20N%3DMath.ceil((T%2B1)%2FcolN-1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs%5BN%5D.style.cssText%20%3D%20%22display%3Ablock%3Bborder-color%3Ared%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs%5BN%5D.innerHTML%20%3D%20contHtml%5BT%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(N!%3Dhotbox)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs%5BN%5D.style.height%20%3D%200%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs%5Bhotbox%5D.style.border%20%3D%200%20%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20wane%20%3D%20setInterval(function()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20hotboxH%20-%3D%20space%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs%5Bhotbox%5D.style.height%20%3D%20hotboxH%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs%5BN%5D.style.height%20%3D%20(hotboxHtemp%20-%20hotboxH%20)%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(divs%5Bhotbox%5D.clientHeight%20%3C%201)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clearInterval(wane)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20divs%5Bhotbox%5D.style.cssText%20%3D%20%22display%3Anone%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20hotbox%3DN%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20hotboxH%20%3D%20hotboxHtemp%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2Ctime)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Function.prototype.bind%20%3D%20function()%7Bvar%20__m%20%3D%20this%3B%20var%20arg%20%3D%20arguments%3B%20return%20function()%7B%20__m.apply(window%2Carg)%3B%20%7D%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(%20i%3D0%3B%20i%3Ca2zTag.length%3B%20i%2B%2B%20)%20a2zTag%5Bi%5D.onclick%20%3D%20TABS.bind(i)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程