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;
}

功能借助jQuery实现*/ $(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(); } }) }); })

功能js实现*/ 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添加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显示全部 btnShow[0].onclick = function(){ var btnIndex = this.getAttribute("button-index"); //表格index与按钮btnIndex for (var t = 0; t