选项卡切换是在网页制作中经常会使用到的一个效果。它的实现方法也有很多种，但是对于一个还没有来得及掌握javascript的制作者来说，实现起来就没有那么简单了。
今天就基于易学易用的jQuery来做一个选项卡切换效果，很简单哦。
原理
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。
以上内容根据个人经验总结，如有错误还请多多指正。欢迎一起交流、学习网页制作相关知识。
54173BLOG原创内容，本文链接：http://www.54173.cn/blog/?p=442，转载请务必保留。
