jquery简单的table切换,在页面可以多次使用。
2014-10-29 23:58
267 查看
<span style="font-size:14px;">生活无乐趣,代码更加无乐趣。</span>
<div class="centera">
<p id="oranger">
<a class="hover" href="javascript:;">内容一</a>
<a href="javascript:;">内容二</a>
<a href="javascript:;">内容三</a>
<a href="javascript:;">内容四</a>
</p>
<div id="tablea" class="tablea">
<div class="box">1111</div>
<div class="box">2222</div>
<div class="box">3333</div>
<div class="box">4444</div>
</div>
</div>
<div class="centera">
<p id="oranger">
<a class="hover" href="javascript:;">内容一</a>
<a href="javascript:;">内容二</a>
<a href="javascript:;">内容三</a>
<a href="javascript:;">内容四</a>
</p>
<div id="tablea" class="tablea">
<div class="box">1111</div>
<div class="box">2222</div>
<div class="box">3333</div>
<div class="box">4444</div>
</div>
</div>
<span style="font-size:14px;"> </span>
<style> body{ margin:0; padding:0;} ul,li,p{ list-style:none; margin:0; padding:0;} p{border:1px solid #333; padding:10px 0;} p a{ padding:0 10px; height:30px; display:inline-block; line-height:30px;} .centera{ padding:20px; overflow:hidden;} .hover{background:#eee;} #tablea{ background:#eee;} .box{ margin:10px; display:none} </style>
$(function(){ $(".tablea").find(".box:first").show(); //为每个BOX的第一个元素显示 $("#oranger a").on("mouseover",function(){ //给a标签添加事件 var index=$(this).index(); //获取当前a标签的个数 $(this).parent().next().find(".box").hide().eq(index).show(); //返回上一层,在下面查找css名为box隐藏,然后选中的显示 $(this).addClass("hover").siblings().removeClass("hover"); //a标签显示,同辈元素隐藏 }) })
<div class="centera">
<p id="oranger">
<a class="hover" href="javascript:;">内容一</a>
<a href="javascript:;">内容二</a>
<a href="javascript:;">内容三</a>
<a href="javascript:;">内容四</a>
</p>
<div id="tablea" class="tablea">
<div class="box">1111</div>
<div class="box">2222</div>
<div class="box">3333</div>
<div class="box">4444</div>
</div>
</div>
<div class="centera">
<p id="oranger">
<a class="hover" href="javascript:;">内容一</a>
<a href="javascript:;">内容二</a>
<a href="javascript:;">内容三</a>
<a href="javascript:;">内容四</a>
</p>
<div id="tablea" class="tablea">
<div class="box">1111</div>
<div class="box">2222</div>
<div class="box">3333</div>
<div class="box">4444</div>
</div>
</div>
相关文章推荐
- 支持同一页面多次使用,jquery imageShown 插件 可以完成任何内容的轮显切换
- 使用jQuery.animate实现简单的页面切换效果
- 改装的tabs页面,鼠标移动上去切换,可以点击链接和jquery的UI是不同的
- 使用JQuery实现简单的图片切换
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- jquery星级插件、支持页面中多次使用
- 如何让jquery datepicker 在同一页面使用多次
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的
- 【技术】同页面可多次使用的jQuery tab选项卡代码
- jQuery实现切换页面布局使用介绍
- JS动态切换图片(一个页面中可多次使用)
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- jQuery万能图片切换插件powerSwitch应用(支持同一页面多次调用)
- IOS开发:使用animateWithDuration简单地控制页面切换效果
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- jquery星级插件、支持页面中多次使用
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。