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

效果图:


示例下载