结构/表现/行为完全分离的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技术在这里显示[email protected]. < br  />< img  src ="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg"   /></ div >  
 8       < div > CSS技术在这里显示[email protected]. < br  />< img  src ="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg"   /></ div >  
 9       < div > xhtml技术在这里显示[email protected]. < 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