基于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 

 

 

效果图:

 示例下载