1.选项卡效果预览
2.源码与简要说明
切换选项卡功能实现
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/07 | 天气预报 |
| CCTV | 2016/11/07 | 天气预报 |
| 广东卫视 | 2016/11/07 | 天气预报 |
| 甘肃卫视 | 2016/11/07 | 天气预报 |
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/07 | 天气预报 |
| CCTV | 2016/11/07 | 天气预报 |
| 广东卫视 | 2016/11/07 | 天气预报 |
| 甘肃卫视 | 2016/11/07 | 天气预报 |
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/07 | 天气预报 |
| CCTV | 2016/11/07 | 天气预报 |
| 广东卫视 | 2016/11/07 | 天气预报 |
| 甘肃卫视 | 2016/11/07 | 天气预报 |
| 安徽卫视 | 2016/11/07 | 天气预报 |
| CCTV | 2016/11/07 | 天气预报 |
| 广东卫视 | 2016/11/07 | 天气预报 |
| 甘肃卫视 | 2016/11/07 | 天气预报 |
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/08 | 天气预报 |
| CCTV | 2016/11/08 | 天气预报 |
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/09 | 天气预报 |
| CCTV | 2016/11/09 | 天气预报 |
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/10 | 天气预报 |
| CCTV | 2016/11/10 | 天气预报 |
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/11 | 天气预报 |
| CCTV | 2016/11/11 | 天气预报 |
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/12 | 天气预报 |
| CCTV | 2016/11/12 | 天气预报 |
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/12 | 天气预报 |
| CCTV | 2016/11/12 | 天气预报 |
| 播出频道 | 时间 | 节目 |
| 安徽卫视 | 2016/11/13 | 天气预报 |
| CCTV | 2016/11/13 | 天气预报 |
switchTab.css 选项卡样式小技巧简要说明
对于选项卡未选中时利用边框透明border-color: rgba(0,0,0,0);；选中后边框顶部颜色border-top-color显示，
这一技巧从而减少其选项卡盒子模型的计算
html {
font-family: "微软雅黑";
font-size: 12px;
}
div, ul, li, p, a {
margin: 0;
padding: 0;
}
.nav-tab {
width: 565px;
height: 54px;
background-color: #fafafa;
position: relative;
display: inline-block;
}
ul.main-tab {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
font-size: 0;
border-bottom: 1px solid #d9d9d9;
margin-bottom: -2px;
}
ul.main-tab li {
display: inline-block;
height: 48px;
padding-top: 4px;
border-width: 2px 1px 0;
border-color: #999;
border-style: solid;
border-color: rgba(0,0,0,0);
_border-color:tomato;
_filter:chroma(color=#ff6347);
}
ul.main-tab li a {
display: inline-block;
height: 100%;
text-decoration: none;
color: #333;
}
ul.main-tab li p {
font-size: 12px;
line-height: 20px;
padding: 0 20px;
}
ul.main-tab li {
border-width: 2px 1px 0;
border-top-color: #19A6A6;
border-left-color: #d9d9d9;
border-right-color: #d9d9d9;
border-style: solid;
border-color: rgba(0,0,0,0);
}
ul.main-tab li.active {
border-width: 2px 1px 0;
border-top-color: #19A6A6;
border-left-color: #d9d9d9;
border-right-color: #d9d9d9;
border-bottom: #FFFFFF;
border-style: solid;
background-color: #FFFFFF;
}
.tab-content {
width: 543px;
min-height: 250px;
border: 1px solid #d9d9d9;
border-top: none;
padding: 10px;
position: relative;
}
.table {
width: 100%;
display: table;
border-collapse: collapse;
border: 0;
}
.table tr td {
padding: 10px;
border-bottom: solid 1px #d9d9d9;
}
.table tr.last-no-border td {
border-bottom: none;
}
.div-buttn {
width: 100%;
height: 30px;
cursor: pointer;
line-height: 30px;
text-align: center;
background-color: #fafafa;
}
.div-buttn i {
width: 14px;
height: 14px;
margin-left: 5px;
display: inline-block;
vertical-align: text-bottom;
font-style: normal;
}
.div-buttn i.c-icon {
background: url(../img/icons.png) no-repeat 0 0;
}
.div-buttn i.c-icon-bottom {
background-position: -71px -168px;
}
.div-buttn i.c-icon-top {
background-position:-96px -168px
}
.close {
display: none;
}
switchTab-jQuery/switchTab-javascript思路简要说明
a.切换不同选项卡显示对应内容
b.点击折叠/展开按钮时，操作的是哪一选项卡对应的内容
3.switchTab-jQuery.js动态效果实现
$(function(){
var $navTab = $("#nav-tab"); //选项卡对象
var $tabCont = $(".tab-content"); //选项卡内容
var $tabContList = $tabCont.find(".table-div"); //选项卡内容列表
var $btnShow = $(".btn-show"); //显示全部
var $btnCollapse = $(".btn-collapse"); //折叠
//选项卡事件绑定
$navTab.on("click", "li", function(){
var $that = $(this);
//获取当前索引值
var navIndex = $that.attr("index");
//当前点击li添加active类，同级兄弟节点移除active类
$that.addClass("active").siblings().removeClass("active");
//当当前点击选项卡navIndex值与表格列表索引tabIndex值相等时显示，否则隐藏
$tabContList.each(function(i){
var $that = $(this);
var tabIndex = $that.attr("tab-index"); //表格列表索引
if(navIndex===tabIndex){
$that.show();
}else{
$that.hide();
}
})
//设置显示全部与折叠按钮索引值---标识当前选中选项卡
$btnShow.attr("button-index",navIndex);
$btnCollapse.attr("button-index", navIndex);
});
//显示全部
$btnShow.on("click", function(){
var $that = $(this);
var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值
$that.hide();
$btnCollapse.show();
$tabContList.each(function(i){
var $that = $(this);
var tabIndex = $that.attr("tab-index"); //表格列表索引
if(btnIndex===tabIndex){
$that.show();
}
})
})
//折叠
$btnCollapse.on("click", function(){
var $that = $(this);
var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值
$that.hide();
$btnShow.show();
$tabContList.each(function(i){
var $that = $(this);
var tabIndex = $that.attr("tab-index"); //表格列表索引
if(btnIndex===tabIndex){
$that.hide();
}
})
});
})
3.switchTab-javascript效果实现
window.onload = function(){
var oTab = document.getElementById("nav-tab");
var liArray = oTab.getElementsByTagName("li");
var tabList = document.getElementsByClassName("table-div");
var btnShow = document.getElementsByClassName("btn-show");
var btnCollapse = document.getElementsByClassName("btn-collapse");
for (var i=0; i
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！
