基于jQuery实现Tabs选项卡自定义插件

2020-05-24 21:38:05易采站长站整理

border-bottom:none;
position:relative;
cursor:pointer;
}
.tabs .tab-headers .tab-header:hover {
background:#ccc;
color:#0094ff;
}
.tabs .tab-headers .tab-header.selected {
background:#fff;
border:none;
cursor:default;
padding-top:5px;
margin-left:1px;
margin-right:6px;
border-top:3px solid #0094ff;
}
.tabs .tab-headers .tab-header .tab-title {
margin-left:5px;
}
.tabs .tab-headers .tab-header .fa-close {
position:relative;
right:-6px;
top:0;
}
.tabs .tab-headers .tab-header .tab-close:hover {
color:#f00;
cursor:pointer;
}
.tabs .tab-contents {
width: 100%;
height: calc(100% - 40px);
}
.tabs .tab-contents .tab-content {
display:none;
}
.tabs .tab-contents .tab-content.selected {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.tabs .tab-contents .tab-content.selected iframe {
width: 100%;
height: 100%;
border: none;
}

本文已被整理到了jquery选项卡操作方法汇总、大家还可以点击javascript选项卡操作方法汇总进行学习。