基于jquery的tab切换 js原理

沫沫心弦

2016-02-19 13:32

下面图老师小编要向大家介绍下基于jquery的tab切换 js原理，看起来复杂实则是简单的，掌握好技巧就OK，喜欢就赶紧收藏起来吧！

打包下载

html代码:

代码如下:
div
ulli rel="a1"b个人资料/b/lili rel="a2"b帐号维护/b/lili rel="a3"b在来个/b/lili/li/ul
dl11111111111111111111111111111111
/dl
dl
22222222222222222222222222222222222
/dl
dl3333333333333333333333333333333333333
/dl
/div

js代码:
代码如下:
$(function(){
$(".tabli").mouseover(function(){
$(".tabli").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.');
}
});
});

效果图: