基于jquery的tab切换

html代码:

 

 1  < div  class ="details" >
 2       < ul  class ="tab" >< li  class ="on"  rel ="a1" >< b > 个人资料 </ b ></ li >< li  rel ="a2" >< b > 帐号维护 </ b ></ li >< li  rel ="a3" >< b > 在来个 </ b ></ li >< li ></ li ></ ul >
 3       < dl  id ="a1" > 11111111111111111111111111111111
 4       </ dl >
 5       < dl  id ="a2"  style ="display:none" >
 6      22222222222222222222222222222222222
 7       </ dl >
 8       < dl  id ="a3"  style ="display:none" > 3333333333333333333333333333333333333
 9       </ dl >
10       </ div >

 

js代码:

 

 1  $( function (){
 2  $( " .tab>li " ).mouseover( function (){
 3      $( " .tab>li " ).removeClass( " on " );
 4      $( this ).addClass( " on " );
 5       var  target  =  $( ' # '   +   this .rel);
 6       if  (target.size()  >   0 ) {
 7          $( ' .details > dl ' ).hide();
 8          target.show();
 9      }  else  {
10          alert( ' There is no such container. ' );
11      }
12  });
13  });
14 
15 

 

 

效果图:

 示例下载

你可能感兴趣的:(jquery)