软件开发培训班 >> 编程开发 >> JavaScript

js 多层叠的TAB选项卡

　　本文标签：多层叠,TAB选项卡

<!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; n2zTag.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; i2zTag.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 
</body> 
</html>

技术文章快速查找

javascript的数据类型、字面量、变量介绍

jquery 简单导航实现代码

jQuery 性能优化指南（1）

html a标签-超链接中confirm方法使用介绍

myEvent.js javascript跨浏览器事件框架

js加入收藏以及使用Jquery更改透明度

用户注册常用javascript代码

107条Javascript的常用语句

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建