有关TAB选项卡的总结
做个TAB选项卡的总结：
“TAB选项卡”的表现形式多种多样.
一，最早的听说是通过iframe框架标签实现，联合导航菜单将需要打开的页面显示在框架中；我没有见过这种，你见过么@!^^^^^。
二，看下面的实现：
首先，HTML结构
再次，CSS表现
最后，JavaScript行为
（例一） —— 行为结构未分离
html:
- 1111111
- 2222222
- 3333333
- 4444444
- 5555555
内容11111111111111111111内容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...每个事件...麻烦么？...
（例二） —— 行为结构未分离
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="";
}
};
};
...设置每个事件...麻烦么？...
（例三） —— 行为结构分离
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].onmouseover=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和标签...灵活么？...
（例四） —— 行为结构分离
结构和样式不贴了，看运行例子。。。
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].onmouseover=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和标签...灵活么？...
（例五） —— 行为结构分离
结构和样式不贴了，看运行例子。。。
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].onmouseover=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和通用类名...灵活么？...
（例六） —— 行为结构分离
结构和样式不贴了，看运行例子。。。
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选项卡需要理解"数组集合"的概念，取得这样的"数组集合"在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].onclick=function(){
alert(i);//点击a似乎应该弹出对应i索引值
return false;//阻止链接跳转
}
}
点击后发现弹出的值始终是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)
}
方法二：属性
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;//阻止链接跳转
}
}
现在知道怎么取得"索引值"了。。。
就有上面例子类似这样的实现
//…………
for(var i=0;i<len;i++){
lis[i].index=i;
lis[i].onmouseover=function(){
//…………
lis[this.index].className = "current tabNav";
divs[this.index].className = "current tabCont";
};
}
//…………
后面的就是一些对应实现。。。
TAB选项卡核心已经完完全全的展示出来了：取得"数组集合"，取得"索引值"，对应功能实现。
选项卡定义有各种各样的实现。。。
如实现自动播放，只要合理运用"索引值"……加上setTimeout()/setInterval()……
如再加上透明/缓动，那效果更炫……如做到这里做焦点图/幻灯片也会了@^_^@
@@@以上这些就是我的TAB选项卡总结，其中肯定有许多的问题，请多多指正，谢谢！
浙公网安备 33010602011771号