您的位置: 首页 > IT文章 > javascript技巧 > js 多层叠的TAB选项卡 js 多层叠的TAB选项卡 分类: IT文章 • 2022-04-07 20:44:23 HTML：多个导航tag加一个放置默认内容div 脚本：以数组的形式给出每个导航对应的html <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> <!--顶部-->一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。HTML：多个导航tag加一个放置默认内容div脚本：以数组的形式给出每个导航对应的html <div class="nonstop" id="a2zbox"> <!--内容区--> <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span> <span>H</span><span>I</span> <span>J</span><span>M</span><span>L</span><span>N</span><span>O</span> <span>P</span><span>S</span><span>T</span><span>U</span><span>Y</span><span>Z</span><span>!</span> <div> <!--默认内容--> 这里放一些默认内容 <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1 </p> </div> </div> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
