js 多层叠的TAB选项卡

HTML：多个导航tag加一个放置默认内容div
脚本：以数组的形式给出每个导航对应的html
</p> <p> <title>多层叠TAB选项卡</title> </p> <p>.nonstop { width:168px; font-size:12px;margin:auto; border:1px solid #cdcdcd; padding:2px; overflow:hidden; }<br /> .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; }<br /> .nonstop span:hover { background:gray; font-weight:bold }<br /> .nonstop div { height:300px; clear:both; border:1px solid #cdcdcd; border-width:2px 1px; margin-left:2px; overflow:hidden; }<br /> .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; }<br /> .nonstop div a img { border:0; }<br /> .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; } </p> <p><!--顶部-->一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。<br /> HTML：多个导航tag加一个放置默认内容div<br /> 脚本：以数组的形式给出每个导航对应的html<br /> <!--内容区--><br /> <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><br /> <span>H</span><span>I</span> <span>J</span><span>M</span><span>L</span><span>N</span><span>O</span><br /> <span>P</span><span>S</span><span>T</span><span>U</span><span>Y</span><span>Z</span><span>!</span><br /> <!--默认内容--><br /> 这里放一些默认内容 </p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1 </p> <p> //20个字母下的品牌，不包含默认显示的内容<br /> var contHtml = ['a1','b2','c3','d4','e5','f6','g7','h21','i22','j23','m24','l25','n26','o27','p11','s12','t13','u14','y15','z16'];<br /> var a2zBox = document.getElementById("a2zbox");<br /> var a2zTag = a2zBox.getElementsByTagName("span");<br /> var a2zCont = a2zBox.getElementsByTagName("div")[0];<br /> var divs = [],colN=Math.floor(a2zCont.clientWidth/(a2zTag[0].clientWidth))//7;<br /> for(var n=1; n </p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• JS实现简单的tab切换选项卡效果
• JS封装的选项卡TAB切换效果示例
• 原生js实现tab选项卡切换
• javascript实现tabs选项卡切换效果(自写原生js)
• js实现tab选项卡函数代码
• 跨浏览器通用、可重用的选项卡tab切换js代码
• 纯php打造的tab选项卡效果代码(不用js)
• Javascript 自适应高度的Tab选项卡
• javascript实现tabs选项卡切换效果(扩展版)
• JS+CSS实现的经典tab选项卡效果代码
• JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
• JS实现的最简Table选项卡效果
• JS实现图文并茂的tab选项卡效果示例【附demo源码下载】