基于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自定义滚动条的实现步骤与相关操作技巧,并给出了jquery.jscroll.js插件的完整代码,需要的朋友可以参考下
    2016-09-09
  • jquery动态添加option示例

    jquery动态添加option示例

    jquery动态添加option选项,还有动态删除的方法,大家参考使用吧
    2013-12-12
  • jQuery实现表单动态加减、ajax表单提交功能

    jQuery实现表单动态加减、ajax表单提交功能

    本篇文章主要讲jQuery实现表单动态加减、ajax表单提交功能,本文主要分为两部分: 一是页面表单动态加减实现,二是复杂表单项提交到controller层。需要的朋友一起学习吧
    2018-06-06
  • jquery插件实现仪表盘

    jquery插件实现仪表盘

    这篇文章主要为大家详细介绍了jquery插件实现仪表盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jQuery初级教程之网站品牌列表效果

    jQuery初级教程之网站品牌列表效果

    这篇文章主要为大家详细介绍了jQuery初级教程之网站品牌列表效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 通过jquery的$.getJSON做一个跨域ajax请求试验

    通过jquery的$.getJSON做一个跨域ajax请求试验

    jquery提供了$.getJSON的方法,让我们可以实现跨域ajax请求,但jqueryAPI上的内容实在太少,如何用$.getJSON,请求网站应该返回怎样的数据库才能让$.getJSON获取到,下面我就用一个实际例子来说明下。
    2011-05-05
  • 打造基于jQuery的高性能TreeView(asp.net)

    打造基于jQuery的高性能TreeView(asp.net)

    项目中经常会遇到树形数据的展现,包括导航,选择等功能,所以树控件在大多项目中都是必须的。那一个实用的树应该具备什么功能呢?
    2011-02-02
  • jquery处理页面弹出层查询数据等待操作实例

    jquery处理页面弹出层查询数据等待操作实例

    这篇文章主要介绍了jquery处理页面弹出层查询数据等待操作,实例分析了jquery实现等待效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JQuery AJAX提交中文乱码的解决方案

    JQuery AJAX提交中文乱码的解决方案

    JQuery是一个非常优秀的框架,在特定场合下使用JQuery提交数据,相当的方便快捷。 但是,在处理一个GB2312编码的网站AJAX提交时,中文数据却成了乱码。
    2010-07-07
  • jQuery ajax的功能实现方法详解

    jQuery ajax的功能实现方法详解

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧
    2017-01-01

最新评论