本文实例讲述了jQuery实现选项卡切换效果简单演示代码。分享给大家供大家参考。具体如下：
运行效果图如下
一、主体程序
选项卡
- 实事
- 政治
- 体育
二、CSS样式
初步布局代码：
*{ margin:0; padding:0}
ul{
list-style: none;
}
.tab{
width: 300px;
margin: 0 auto;
}
.tab .tab_menu{
border: 1px solid #000000;
height: 30px;
width: 300px;
}
.tab .tab_menu ul li{
float: left;
width: 99px;
text-align: center;
line-height: 30px;
border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
border-right:none;
width: 100px;
}
.tab .tab_menu ul li.on{
background: #999;
}
.tab .tab_box > div{
width: 300px;
height: 200px;
border: #333333 solid;
border-width: 0 1px 1px 1px;
}
上面的代码实现布局如下：
但是我们只需要一个框架里面的内容进行显示，所以在上面代码的前提下添加一些小代码辅助就可以了~~~~~~
进一步布局样式代码：
*{ margin:0; padding:0}
ul{
list-style: none;
}
.tab{
width: 300px;
margin: 0 auto;
}
.tab .tab_menu{
border: 1px solid #000000;
height: 30px;
width: 300px;
}
.tab .tab_menu ul li{
float: left;
width: 99px;
text-align: center;
line-height: 30px;
border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
border-right:none;
width: 100px;
}
.tab .tab_menu ul li.on{
background: #999;
}
.tab .tab_box > div{
width: 300px;
height: 200px;
border: #333333 solid;
border-width: 0 1px 1px 1px;
display: none; //将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来
}
.tab .tab_box > div:first-child{
display: block;
}
上面程序给.tab .tab_box > div样式多添加了一个display：none，另外还通过:first-child属性只将第一个框架内容显示出来~~~~~~这样我们看到的布局就和我上面刚开始放的动画效果图保持一致了，布局也算是完成了~~~~~~
三、Jquery代码：
$(function(){
$(".tab_menu ul li").click(function(){
$(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态
var index=$(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
$(".tab_box > div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
});
});
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
希望本文所述对大家学习jquery程序设计有所帮助。
