做个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和标签...灵活么？...
