html代码:

复制代码 代码如下:

<div>

<ul><li rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3"><b>在来个</b></li><li></li></ul>

<dl id="a1">11111111111111111111111111111111

</dl>

<dl id="a2">

22222222222222222222222222222222222

</dl>

<dl id="a3">3333333333333333333333333333333333333

</dl>

</div>

js代码:

复制代码 代码如下:

$(function(){

$(".tab>li").mouseover(function(){

$(".tab>li").removeClass("on");

$(this).addClass("on");

var target = $('#' + this.rel);

if (target.size() > 0) {

$('.details > dl').hide();

target.show();

} else {

alert('There is no such container.');

}

});

});

效果图:

打包下载地址