js 多层叠的TAB选项卡

网络编程 2025/1/22 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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                              ABCDEFG                 HI    JMLNO                 PSTUYZ!                                      这里放一些默认内容                     <p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1                                           <script type="text/javascript">                 //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 </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

多层叠,TAB选项卡

标签：

多层叠,TAB选项卡

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“js 多层叠的TAB选项卡”

暂无js 多层叠的TAB选项卡的评论...

更新日志

2025年01月22日

js 多层叠的TAB选项卡

多层叠,TAB选项卡

javascript 自动标记来自搜索结果页的关键字

javascript 三种数组复制方法的性能对比

评论“js 多层叠的TAB选项卡”

更新日志

友情链接