js 多层叠的TAB选项卡- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js 多层叠的TAB选项卡

Javascript: 编辑浪子版表单验证类; JavaScript脚本语言在网页中的简单应用; getElementById在任意一款浏览器中都可以用吗的疑问回复; “增强js程序代码的健壮性”之我见大量示例代码; javascript之卸载鼠标事件的代码; 静态页面下用javascript操作ACCESS数据库(读增改删)的代码; javascript操作文本框readOnly; 用javascript实现gb2312转utf-8的脚本; 网站被黑的假象--ARP欺骗之页面中加入一段js; (JS实现)MapBar中坐标的加密和解密的脚本; 几款极品的javascript压缩混淆工具; [原创]由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密; JavaScript中的new的使用方法与注意事项; 分别用两个函数实现的菜单; 非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签; 用javascript实现的支持lrc歌词的播放器; JS加ASP二级域名转向的代码; 效果直逼flash的Div+Css+Js菜单; input之怎么清除默认值; 用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]

No. « ‹ 67 68 69 70 › »

技术文章搜索

关键字

Javascript 中的 js 多层叠的TAB选项卡

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 337 ::

收藏到网摘: n/a

javascript 三种数组复制方法的性能对比 javascript 自动标记来自搜索结果页的关键字

一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。 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> <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<a2zTag.length/colN; n++){ divs[n-1] = document.createElement("div"); divs[n-1].style.display = "none"; a2zBox.insertBefore(divs[n-1],a2zTag[colN*n]); } divs.push(a2zCont); var hotbox = divs.length-1;//初始内容div ID var hotboxH = a2zCont.clientHeight; //内容div高度 var hotboxHtemp = hotboxH; var time = 50, space = 100;//滑动速度 contHtml.push(a2zCont.innerHTML); function TABS(T){ for( i=0; i<a2zTag.length; i++ ) //a2zTag[i].removeAttribute("class"); a2zTag[i].className=""; a2zTag[T].className = "hot"; var N=Math.ceil((T+1)/colN-1); divs[N].style.cssText = "display:block;border-color:red"; divs[N].innerHTML = contHtml[T]; if(N!=hotbox){ divs[N].style.height = 0; divs[hotbox].style.border = 0 ; var wane = setInterval(function(){ hotboxH -= space; divs[hotbox].style.height = hotboxH + "px"; divs[N].style.height = (hotboxHtemp - hotboxH ) + "px"; if(divs[hotbox].clientHeight < 1){ clearInterval(wane); divs[hotbox].style.cssText = "display:none"; hotbox=N; hotboxH = hotboxHtemp; } },time); } } Function.prototype.bind = function(){var __m = this; var arg = arguments; return function(){ __m.apply(window,arg); } } for( i=0; i<a2zTag.length; i++ ) a2zTag[i].onclick = TABS.bind(i); </script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript 三种数组复制方法的性能对比 javascript 自动标记来自搜索结果页的关键字

Javascript 中的 js 多层叠的TAB选项卡

评论 (0) All