**
* Author Zhangjiangfeng
* Date 2016/11/9 PM 20:35 night
* 选项卡样式实现
*/
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;
}
u
l.main-tab
{
list-style: none;
margin: 0;
padding: 0;
height: 100%;
font-size: 0; /*消除display: inline-block间隙*/
border-bottom: 1px solid #d9d9d9;
margin-bottom: -2px;
}
u
l.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
);
_border-color:tomato;
_filter:chroma(color=#ff6347
);
}
u
l.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;
}
/利用边框的透明从而减少li盒子计算样式/
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);
}
/ ul.main-tab li:hover {
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;
}/
/选项卡选中样式/
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;
}
{
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===tabInde
X){
$that.show(
);
}else
{
$that.hide(
);
}
})
//设置显示全部与折叠按钮索引值---标识当前选中选项卡
$btnShow.attr("button-index",navInde
X);
$btnCollapse.attr("button-index",navInde
X);
}
);
//显示全部
$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===tabInde
X){
$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===tabInde
X){
$that.hide(
);
}
})
}
);
})
.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
{
liArraY[i].onclick = function(){
for (var j=0; j{
//移除class样式
liArraY[j].className = "";
}
//添加class样式
this.className = "active";
//获取DOM索引值
var index = this.getAttribute("index");
btnShow[0].setAttribute("button-index",indeX);
btnCollapse[0].setAttribute("button-index",indeX);
//内容切换
for (var t = 0; t{
var tableIndex = tabList[t].getAttribute("tab-index");
if(index === tableIndeX){
tabList[t].style.display = "block";
}else{
tabList[t].style.display = "none";
}
}
}
}
//显示全部
btnShow[0].onclick = function(){
var btnIndex = this.getAttribute("button-index");
//表格index与按钮btnIndex
for (var t = 0; t{
var tableIndex = tabList[t].getAttribute("tab-index");
if(btnIndex === tableIndeX){
tabList[t].style.display = "block";
}
}
this.style.display = "none";
btnCollapse[0].style.display = "block";
}
//折叠
btnCollapse[0].onclick = function(){
var btnIndex = this.getAttribute("button-index");
//表格index与按钮btnIndex
for (var t = 0; t{
var tableIndex = tabList[t].getAttribute("tab-index");
if(btnIndex === tableIndeX){
tabList[t].style.display = "none";
}
}
this.style.display = "none";
btnShow[0].style.display = "block";
}
}
