html代码: 复制代码 代码如下: <div class="details"> <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> <dl id="a1">11111111111111111111111111111111 </dl> <dl id="a2" style="display:none"> 22222222222222222222222222222222222 </dl> <dl id="a3" style="display:none">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.'); } }); }); 效果图: 打包下载地址

　　推荐阅读

　　js setTimeout实现延迟关闭弹出层

#flyout { border: solid 2px Gray; background-color: #FFF999; width: 300px; height: 100px; display: none; } Click me to show flyout This is a flyout [Ct>>>详细阅读

本文标题：基于jquery的tab切换 js原理

地址：http://www.17bianji.com/kaifa2/JS/26720.html

 1/2    1