jq 选项卡切换封装_jQuery实现选项卡切换效果简单演示

本文实例讲述了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(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容

});

});

希望本文所述对大家学习jquery程序设计有所帮助。