提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

基于jquery的tab切换js原理

jQueryJS原理 基于 切换 tab
2023-06-13 09:14:17 时间
html代码:
复制代码代码如下:

<divclass="details">
<ulclass="tab"><liclass="on"rel="a1"><b>个人资料</b></li><lirel="a2"><b>帐号维护</b></li><lirel="a3"><b>在来个</b></li><li></li></ul>
<dlid="a1">11111111111111111111111111111111
</dl>
<dlid="a2"style="display:none">
22222222222222222222222222222222222
</dl>
<dlid="a3"style="display:none">3333333333333333333333333333333333333
</dl>
</div>

js代码:
复制代码代码如下:

$(function(){
$(".tab>li").mouseover(function(){
$(".tab>li").removeClass("on");
$(this).addClass("on");
vartarget=$("#"+this.rel);
if(target.size()>0){
$(".details>dl").hide();
target.show();
}else{
alert("Thereisnosuchcontainer.");
}
});
});

效果图:

相关文章