当前位置: 代码迷 >> Web前端 >> jQuery入门:选项卡切换奇效
  详细解决方案

jQuery入门:选项卡切换奇效

热度:207   发布时间:2012-09-05 15:19:34.0
jQuery入门:选项卡切换特效
演示页面:http://www.54173.cn/blog/wp-content/uploads/2011/jquery/tab.html

原理

css:为html元素设置不同的类,利用display属性控制元素是否显示。

html:选项卡和内容数量相等且一一对应。

jquery:根据鼠标动作获取到被选中的选项卡;改变当前选项卡的类,使其显示;改变其它选项卡的类,使其显示未选中;获取当前选项卡在父元素中的顺序并找到对应的内容容器;改变此对应内容容器的类,使其显示;改变其它内容容器的类,使其隐藏。

html结构

<div class="title_box clearfix"> //水平方向的两个选项卡
<h3 class="now_focus">第一个选项卡,默认选中</h3>
<h3>第二个选项卡,默认不选中</h3>
</div>
<div class="con_box"> //两个内容容器
<div class="now_focus clearfix">第一个容器,默认显示</div>
<div>第二个容器,默认不显示</div>
</div>

CSS样式


<style type="text/css">
.title_box {}
.title_box h3 {float:left; width:100px; height:30px; line-height:30px; text-align:center; margin-right:5px; background:#000; color:#fff; cursor:pointer; font-weight:normal;}
.title_box h3.now_focus {background:#fff; color:#000; font-weight:bold;}
.con_box {}
.con_box div {display:none; padding:30px; background:#fff;} //默认不显示
.con_box div.now_focus {display:block;} //使用display属性,父元素的高度将受当前显示元素高度的影响
</style>

jQuery代码


<script type="text/javascript">
$(document).ready(function() {
$(".title_box h3").click(function() {
$(this).addClass("now_focus"); //为被点击的选项卡添加“now_focus”类
$(this).siblings().removeClass("now_focus"); //去掉其它选项卡的“now_focus”类
var $dangqian = $(".con_box > div").eq($(".title_box h3").index(this)); //获取到和被点击选项卡顺序相同的内容容器
$dangqian.addClass("now_focus"); //为这个内容容器添加“now_focus”类
$dangqian.siblings().removeClass("now_focus"); //去掉其它内容容器的“now_focus”类
});
});
</script>

本着简单、易懂的原则,本例只实现了最基础的效果,利用css可以做出更加漂亮的选项卡切换。在演示页面中提供了一个垂直方向的选项卡切换实例以便参考,方法和本例一样,只是css样式不同而已。本例使用的是jquery 1.6.0。

以上内容根据个人经验总结,如有错误还请多多指正。欢迎一起交流、学习网页制作相关知识。
原文:http://www.54173.cn/blog/?p=442,转载请务必保留。
作者:mming
  相关解决方案