结构/表现/行为完全分离的tab选项卡JS版(转)

 1 <style type="text/css"> 
 2 /*reset css*/
 3 body{font-size:0.8em;letter-spacing:1px;font-family:"Microsoft YaHei"; line-height:1.8em}
 4 div,h2,p,ul,li{margin:0;padding:0}
 5 h1{font-size:1em; font-weight:normal;}
 6 h1 a{background:#047; padding:2px 3px; color:#fff; text-decoration:none;}
 7 h1 a:hover{background:#a40000; color:#fff; text-decoration:underline}
 8 h3{color:#888; font-weight:bold;font-size:1em; margin:1em auto; position:relative}
 9 /*demo css*/
10 h2{width:120px; height:25px;background:#a40000;font-size:12px; color:#fff;text-align:center; ;line-height:25px;margin:30px 0 10px}
11 
12 ul#tabnav{width:500px;height:25px;margin-left:100px}
13 ul#tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}
14 ul#tabnav li.hover{background:#047}
15 #tabbox{width:500px;height:100%;border:2px solid #047}
16 #tabbox div{margin:10px;line-height:20px}
17 </style> 

 1 <script type="text/javascript"> 
 2 window.onload=function(){
 3     var tabnav=document.getElementById('tabnav');
 4     var list=tabnav.getElementsByTagName('li');
 5     var tabbox=document.getElementById('tabbox');
 6     var divs=tabbox.getElementsByTagName('div');
 7     var hover='hover';//当前点击显示的样式
 8     var indexValue=function(self,obj){//获取索引值的函数,通过它获取当前点击在导航中的索引位置
 9         for(var i=0;i<obj.length;i++){
10             if(obj[i]==self) return i;
11         }
12     };
13     var index;
14     list[0].className=hover;//第一个默认高亮,建议在页面中直接定义
15     for(var k=1;k<divs.length;k++){//我为了省事,用一个for循环定义默认显示第一个切换区块,其他隐藏.这个最好用CSS定义,能避免页面加载时它全部显示出来.
16         divs[k].style.display='none';
17     }
18     for(var l=0;l<list.length;l++){//点击事件
19         list[l].onclick=function(){
20             index=indexValue(this,list);//利用前面定义的indexValue函数取当前点击在选项导航中的索引值,
21             for(var m=0;m<list.length;m++){
22                 list[m].className= (m==index) ? hover : '';//高亮显示点击项并移除其他项高亮
23             }
24             for(var n=0;n<divs.length;n++){
25                 divs[n].style.display= (n==index) ? 'block' : 'none';//显示点击对应的选项区,隐藏其他
26             }
27         }
28     }
29 }
30 </script> 

 1 <ul id="tabnav"> 
 2     <li>jQuery技术</li> 
 3     <li>CSS技术</li> 
 4     <li>xhtml技术</li> 
 5 </ul> 
 6 <div id="tabbox"> 
 7     <div>jQuery技术在这里显示!@Mr.Think.<br /><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
 8     <div>CSS技术在这里显示!@Mr.Think.<br /><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
 9     <div>xhtml技术在这里显示!@Mr.Think.<br /><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
10 </div> 

http://www.cnblogs.com/mrthink/archive/2010/08/13/1799309.html