做个TAB选项卡的总结:
“TAB选项卡”的表现形式多种多样.
一,最早的听说是通过iframe框架标签实现,联合导航菜单将需要打开的页面显示在框架中;我没有见过这种,你见过么@!^^^^^。
二,看下面的实现:
首先,HTML结构
再次,CSS表现
最后,JavaScript行为
(例一) —— 行为结构未分离
html:
- 1111111
- 2222222
- 3333333
- 4444444
- 5555555
内容11111111111111111111
内容22222222222222222222
内容33333333333333333333
内容44444444444444444444
内容55555555555555555555
css:
/*。。。随便写滴样式,但是好好运用样式会让页面更漂亮。。。*/
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
#demo{ width:500px; margin:50px auto;box-shadow:1px 2px 3px #000;}
li{ float:left; height:30px; width:100px; font:14px/30px simsun; text-align:center; background:#0CF; color:#FFF; cursor:pointer;}
li.current{ background:#F00;color:#FFF;}
p{ display:none;}
#content{ height:300px; background:#F00; color:#FFF; font-size:24px;}
js:
function TAB(n){ var lis=document.getElementById("demo").getElementsByTagName("li");//获取列表集合 for(var i=0;i<lis.length;i++){lis[i].className=""};//循环 清除每个列表的类名 lis[n-1].className="current";//设置 当前点击的列表的类名 var div=document.getElementById("content");//显示容器 var ps=document.getElementById("p"+n);//对应的内容容器 它是隐藏的 div.innerHTML=ps.innerHTML;//复制到显示容器 };
...设置每个id...每个事件...麻烦么?...
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>TAB选项卡</title> <style> /*。。。随便写滴样式,但是好好运用样式会让页面更漂亮。。。*/ *{ margin:0; padding:0;} ul,li{ list-style:none;} #demo{ width:500px; margin:50px auto;box-shadow:1px 2px 3px #000;} li{ float:left; height:30px; width:100px; font:14px/30px simsun; text-align:center; background:#0CF; color:#FFF; cursor:pointer;} li.current{ background:#F00;color:#FFF;} p{ display:none;} #content{ height:300px; background:#F00; color:#FFF; font-size:24px;} </style> </head> <body> <div id="demo"> <ul> <li οnclick="TAB(1)" class="current">1111111</li> <li οnclick="TAB(2)">2222222</li> <li οnclick="TAB(3)">3333333</li> <li οnclick="TAB(4)">4444444</li> <li οnclick="TAB(5)">5555555</li> </ul> <div id="content"> 内容11111111111111111111 </div> <p id="p1">内容11111111111111111111</p> <p id="p2">内容22222222222222222222</p> <p id="p3">内容33333333333333333333</p> <p id="p4">内容44444444444444444444</p> <p id="p5">内容55555555555555555555</p> </div> <script type="text/javascript"> function TAB(n){ var lis=document.getElementById("demo").getElementsByTagName("li");//获取列表集合 for(var i=0;i<lis.length;i++){lis[i].className=""};//循环 清除每个列表的类名 lis[n-1].className="current";//设置 当前点击的列表的类名 var div=document.getElementById("content");//显示容器 var ps=document.getElementById("p"+n);//对应的内容容器 它是隐藏的 div.innerHTML=ps.innerHTML;//复制到显示容器 }; </script> </body> </html>(例二) —— 行为结构未分离
html:
- 1111111
- 2222222
- 3333333
- 4444444
- 5555555
内容11111111111111111111
内容22222222222222222222
内容33333333333333333333
内容44444444444444444444
内容55555555555555555555
css:
/*。。。随便写滴样式,但是好好运用样式会让页面更漂亮。。。*/
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
#demo{ width:500px; margin:50px auto;box-shadow:1px 2px 3px #000;}
li{ float:left; height:30px; width:100px; font:14px/30px simsun; text-align:center; background:#0CF; color:#FFF; cursor:pointer;}
li.current{ background:#F00;color:#FFF;}
p{display:none; height:300px; background:#F00; color:#FFF; font-size:24px;}
p.current{ display:block;}
js:
function TAB(n){ var lis=document.getElementById("demo").getElementsByTagName("li");//获取列表集合 var ps=document.getElementById("demo").getElementsByTagName("p");//获取显示内容集合 for(var i=0;i<lis.length;i++){//循环判断集合下标 是则显示 否则隐藏 if(n-1==i){ lis[i].className="current"; ps[i].className="current"; }else{ lis[i].className=""; ps[i].className=""; } }; };
...设置每个事件...麻烦么?...
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>TAB选项卡</title> <style> /*。。。随便写滴样式,但是好好运用样式会让页面更漂亮。。。*/ *{ margin:0; padding:0;} ul,li{ list-style:none;} #demo{ width:500px; margin:50px auto;box-shadow:1px 2px 3px #000;} li{ float:left; height:30px; width:100px; font:14px/30px simsun; text-align:center; background:#0CF; color:#FFF; cursor:pointer;} li.current{ background:#F00;color:#FFF;} p{display:none; height:300px; background:#F00; color:#FFF; font-size:24px;} p.current{ display:block;} </style> </head> <body>- 1111111
- 2222222
- 3333333
- 4444444
- 5555555
内容11111111111111111111
内容22222222222222222222
内容33333333333333333333
内容44444444444444444444
内容55555555555555555555
(例三) —— 行为结构分离
html:
- 1111111
- 2222222
- 3333333
- 4444444
- 5555555
内容11111111111111111111
内容22222222222222222222
内容33333333333333333333
内容44444444444444444444
内容55555555555555555555
css:
/*。。。随便写滴样式,但是好好运用样式会让页面更漂亮。。。*/
/*。。。和例二一样。。。*/
js:
var $$i=function(id,tag){ if(!tag){return document.getElementById(id);} else{return document.getElementById(id).getElementsByTagName(tag);} }; function Tab(){ var lis=$$i("demo","li");//相当于var lis=document.getElementById("demo").getElementsByTagName("li"); var divs=$$i("demo","p"); var len=lis.length; for(var i=0;i<len;i++){ lis[i].index=i; lis[i].οnmοuseοver=function(){ for(var j=0;j<len;j++){lis[j].className = "";divs[j].className = ""; } lis[this.index].className = "current"; divs[this.index].className = "current"; }; } }; Tab();
...设置id和标签...灵活么?...
TAB选项卡- 1111111
- 2222222
- 3333333
- 4444444
- 5555555
内容11111111111111111111
内容22222222222222222222
内容33333333333333333333
内容44444444444444444444
内容55555555555555555555
(例四) —— 行为结构分离
结构和样式不贴了,看运行例子。。。
js:
var $i=function(id){return "string" == typeof id ? document.getElementById(id) : id;}; var $t=function(n,el){return (el || document).getElementsByTagName(n);}; function Tab(id,taga,tagb){//taga第一个集合标签名 tagb第二个集合标签名 var el=$i(id); if(!el) return false; var lis=$t(taga,el); var divs=$t(tagb,el); var len=lis.length; for(var i=0;i<len;i++){ lis[i].index=i; lis[i].οnmοuseοver=function(){ for(var j=0;j<len;j++){lis[j].className = "";divs[j].className = ""; } lis[this.index].className = "current"; divs[this.index].className = "current"; }; } }; Tab("demo","li","p"); Tab("demo2","span","div");
...设置id和标签...灵活么?...
TAB选项卡- 1111111
- 2222222
- 3333333
- 4444444
- 5555555
内容11111111111111111111
内容22222222222222222222
内容33333333333333333333
内容44444444444444444444
内容55555555555555555555
11111 22222 33333 44444 55555
(例五) —— 行为结构分离
结构和样式不贴了,看运行例子。。。
js:
var $c=function(classname,node){//获取指定类名的函数 有各种版本 var a = []; var re = new RegExp('(^| )'+classname+'( |$)'); var els = (node||document).getElementsByTagName("*"); for(var i=0,j=els.length; i<j; i++) if(re.test(els[i].className)) a.push(els[i]); return a; }; var $i=function(id){return "string" == typeof id ? document.getElementById(id) : id;}; function addLoadEvent(func) { var oldonload = window.onload; if(typeof window.onload != 'function'){window.onload = func;}else{window.onload = function(){oldonload();func();}} }; function Tab(id){ var el=$i(id); if(!el) return false; var lis=$c("tabNav",el),divs=$c("tabCont",el),len=lis.length;//其中tabNav和tabCont是自定义通用类 for(var i=0;i<len;i++){ lis[i].index=i; lis[i].οnmοuseοver=function(){ for(var j=0;j<len;j++){lis[j].className = "tabNav";divs[j].className = "tabCont"; } lis[this.index].className = "current tabNav"; divs[this.index].className = "current tabCont"; }; } }; addLoadEvent(function(){ Tab("demo"); Tab("demo2"); });
...设置id和通用类名...灵活么?...
TAB选项卡- 1111111
- 2222222
- 3333333
- 4444444
- 5555555
内容11111111111111111111
内容22222222222222222222
内容33333333333333333333
内容44444444444444444444
内容55555555555555555555
1111111
2222222
3333333
4444444
5555555
内容11111111111111111111 内容22222222222222222222 内容33333333333333333333 内容44444444444444444444 内容55555555555555555555(例六) —— 行为结构分离
结构和样式不贴了,看运行例子。。。
js:
var $i = function (id){return "string" == typeof id ? document.getElementById(id) : id;}; var $c=function(classname,node){//获取指定类名的函数 有各种版本 var a = []; var re = new RegExp('(^| )'+classname+'( |$)'); var els = (node||document).getElementsByTagName("*"); for(var i=0,j=els.length; i<j; i++) if(re.test(els[i].className)) a.push(els[i]); return a; }; function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){window.onload = func;}else{window.onload = function(){oldonload();func();}} }; function Tab() { var jstab = $c("jstab");//通用定义TAB选项卡类 for (var i = 0; i < jstab.length; i++){ (function(i) { var els = jstab[i]; var lis = $c("tab", els),//其中tab和tab-con是自定义通用类 divs = $c("tab-con", els), len = lis.length; for (var j = 0; j < len; j++) { lis[j].index = j; lis[j].onmouseover = function() { for (var m = 0; m < len; m++) { lis[m].className = "tab"; divs[m].className = "tab-con"; } lis[this.index].className = "tab current"; divs[this.index].className = "tab-con current"; }; } })(i) } }; addLoadEvent(function(){ Tab(); });
...设置通用类名...灵活么?...
TAB选项卡- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
1111111
2222222
3333333
4444444
5555555
内容11111111111111111111 内容22222222222222222222 内容33333333333333333333 内容44444444444444444444 内容55555555555555555555深度分析:
@实现TAB选项卡需要理解"数组集合"的概念,取得这样的"数组集合"在HTML页面中就是:
1.标签的集合 li div h1-h6 p dl ...
var lis=document.getElementsByTagName("li");//取得页面li标签的集合并传给变量lis,这样变量lis就是li标签集合的引用
2.类名的集合 .class1 .class2 .class2 ...
var elements=document.getElementsByClassName("class1");//取得页面类名为class1元素的集合 //getElementsByClassName方法某些浏览器没有实现,可以自己定义一个,也可以在网上找找。。。
//getElementsByClassName可以参考这里的实现。
3.类名和标签结合的集合 div.class1 p.class2 ...
4.其它方式建立的集合...
@@现在"集合"有了,该做什么呢:
假如有两个集合:一个为菜单A 一个为内容B。我们希望当我们点击或者移到A[0]时相应的B[0]为显示状态,A[1]/B[1]...
我们发现A[0]中的0,B[0]中的0,A[1]/B[1]...是相同的,也是数组的下标,也称为索引值,我们要做的就是得到这个索引值。
@@@在取得这个值之前做个试验,运行下面例子:
var aa=document.getElementsByTagName("a");//取得页面a标签的集合 共5个 for(var i=0;i<aa.length;i++){ aa[i].οnclick=function(){ alert(i);//点击a似乎应该弹出对应i索引值 return false;//阻止链接跳转 } }无标题文档 11111 22222 33333 44444 55555
点击后发现弹出的值始终是5 为什么呢?作用域问题。。。
该怎么解决呢?运行下面例子:
方法一:闭包
var aa = document.getElementsByTagName("a"); //取得页面a标签的集合 共5个 for (var i = 0; i<aa.length; i++) { (function(m) { aa[m].onclick = function() { alert(m); //点击a弹出对应i的值 return false;//阻止链接跳转 } })(i) }无标题文档 11111 22222 33333 44444 55555
方法二:属性
var aa = document.getElementsByTagName("a"); //取得页面a标签的集合 共5个 for (var i = 0; i<aa.length; i++) { aa[i].index=i;//为aa[i]创建个属性index aa[i].onclick = function() { alert(this.index); //点击a弹出对应i的值 return false;//阻止链接跳转 } }无标题文档 11111 22222 33333 44444 55555
现在知道怎么取得"索引值"了。。。
就有上面例子类似这样的实现
//………… for(var i=0;i<len;i++){ lis[i].index=i; lis[i].οnmοuseοver=function(){ //………… lis[this.index].className = "current tabNav"; divs[this.index].className = "current tabCont"; }; } //…………
后面的就是一些对应实现。。。
TAB选项卡核心已经完完全全的展示出来了:取得"数组集合",取得"索引值",对应功能实现。
选项卡定义有各种各样的实现。。。
如实现自动播放,只要合理运用"索引值"……加上setTimeout()/setInterval()……
如再加上透明/缓动,那效果更炫……如做到这里做焦点图/幻灯片也会了@^_^@
@@@以上这些就是我的TAB选项卡总结,其中肯定有许多的问题,请多多指正,谢谢!