HTML：多个导航tag加一个放置默认内容div 脚本：以数组的形式给出每个导航对应的html 多层叠TAB选项卡 .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; } 一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。 HTML：多个导航tag加一个放置默认内容div 脚本：以数组的形式给出每个导航对应的html ABCDEFG HI JMLNO PSTUYZ! 这里放一些默认内容 11111111 //20个字母下的品牌，不包含默认显示的内容 var contHtml = ['a1','b2','c3','d4','e5','f6','g7','h21','i22','j23','m24','l25','n26','o27','p11','s12','t13','u14','y15','z16']; var a2zBox = document.getElementById("a2zbox"); var a2zTag = a2zBox.getElementsByTagName("span"); var a2zCont = a2zBox.getElementsByTagName("div")[0]; var divs = [],colN=Math.floor(a2zCont.clientWidth/(a2zTag[0].clientWidth))//7; for(var n=1; n [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　JavaScript 判断判断某个对象是Object还是一个Array

1.typeof 操作符.对于Function， String， Number ，Undefined 等几种类型的对象来说，他完全可以胜任，但是为Array时 复制代码 代码如下: var arr=new Array("1","2","3","4","5"); alert(typeof(arr)); 你会收到>>>详细阅读

本文标题：js 多层叠的TAB选项卡

地址：http://www.17bianji.com/kaifa2/JS/27160.html

 1/2    1