基于jquery的tab切换 js原理

更新时间：2010年04月01日 21:57:27 作者：

基于jquery的tab切换使用的是js的原理。绑定鼠标经过事件实现的。

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.'); 
} 
}); 
}); 

效果图:

打包下载地址

您可能感兴趣的文章:

jQuery实现的自定义滚动条实例详解
这篇文章主要介绍了jQuery实现的自定义滚动条,结合完整实例详细分析了jQuery自定义滚动条的实现步骤与相关操作技巧,并给出了jquery.jscroll.js插件的完整代码,需要的朋友可以参考下
2016-09-09
jquery动态添加option示例
jquery动态添加option选项，还有动态删除的方法，大家参考使用吧
2013-12-12
jQuery实现表单动态加减、ajax表单提交功能
本篇文章主要讲jQuery实现表单动态加减、ajax表单提交功能，本文主要分为两部分：一是页面表单动态加减实现，二是复杂表单项提交到controller层。需要的朋友一起学习吧
2018-06-06
jquery插件实现仪表盘
这篇文章主要为大家详细介绍了jquery插件实现仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
jQuery初级教程之网站品牌列表效果
这篇文章主要为大家详细介绍了jQuery初级教程之网站品牌列表效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
通过jquery的$.getJSON做一个跨域ajax请求试验
jquery提供了$.getJSON的方法，让我们可以实现跨域ajax请求，但jqueryAPI上的内容实在太少，如何用$.getJSON，请求网站应该返回怎样的数据库才能让$.getJSON获取到，下面我就用一个实际例子来说明下。
2011-05-05
打造基于jQuery的高性能TreeView(asp.net)
项目中经常会遇到树形数据的展现，包括导航，选择等功能，所以树控件在大多项目中都是必须的。那一个实用的树应该具备什么功能呢？
2011-02-02
jquery处理页面弹出层查询数据等待操作实例
这篇文章主要介绍了jquery处理页面弹出层查询数据等待操作,实例分析了jquery实现等待效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
JQuery AJAX提交中文乱码的解决方案
JQuery是一个非常优秀的框架，在特定场合下使用JQuery提交数据，相当的方便快捷。但是，在处理一个GB2312编码的网站AJAX提交时，中文数据却成了乱码。
2010-07-07
jQuery ajax的功能实现方法详解
jQuery的ajax方法非常好用，这么好的东西，你想拥有一个属于自己的ajax么？接下来，我们来自己做一个简单的ajax吧
2017-01-01