js 多层叠的TAB选项卡
作者:bea
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">
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"><!--内容区-->
<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>1<p>1<p>1<p>1<p>1<p>1<p>1
</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 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
脚本:以数组的形式给出每个导航对应的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"><!--内容区-->
<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>1<p>1<p>1<p>1<p>1<p>1<p>1
</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 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript 匿名函数的理解(透彻版)
- JavaScript 学习笔记(十五)
- Extjs 几个方法的讨论
- JavaScript 判断判断某个对象是Object还是一个Array
- 图像替换新技术 状态域方法
- javascript innerText和innerHtml应用
- js 右键菜单,支持不同对象不同菜单(兼容IE、Firefox)
- 使用JavaScript库还是自己写代码?
- js或css实现滚动广告的几种方案
- jquery中的sortable排序之后的保存状态的解决方法
- javascript面向对象的方式实现的弹出层效果代码
- js提示信息jtip封装代码,可以是图片或文章
- jquery 常用操作方法
- jquery 经典动画菜单效果代码
- 使用JQuery进行跨域请求
- JavaScript 使用简略语法创建对象的代码
- javascript 的Document属性和方法集合
- 起点页面传值js,有空研究学习下
- javascript 自动标记来自搜索结果页的关键字