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