0
我正在開發一個功能，其中有不同的選項卡組。 我希望每一組選項卡都可以獨立運作。我的意思是：任何其他選項卡都必須干擾其他組的行爲。如何爲不同的選項卡設置單獨的行爲？
到目前爲止，我在代碼中遇到的唯一錯誤是，當您單擊第一組的任一選項卡時，其他組的選項卡的內容將消失。
而且我需要默認情況下每個集合的第一個選項卡始終處於選中狀態。
$(document).ready(function() {
$('.tabs a:not(:first)').addClass('inactive');
$('.container').hide();
$('.tabs').next('.container').show();
$('.tabs a').click(function() {
var t = $(this).attr('id');
if ($(this).hasClass('inactive')) { //this is the start of our condition
$(this).siblings('a').addClass('inactive');
$(this).removeClass('inactive');
$(this).parent().nextAll('.container').hide();
$('#' + t + 'C').fadeIn('slow');
}
});
});.tabs {
width: 100%;
height: 30px;
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;
}
a {
cursor: pointer;
}
.tabs a {
float: left;
list-style: none;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-right: 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
outline: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #5685bc;
;
padding-top: 5px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 8px;
display: block;
background: #FFF;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-decoration: none;
outline: none;
}
.tabs a.inactive {
padding-top: 5px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
color: #666666;
background: #EEE;
outline: none;
border-bottom: solid 1px #CCC;
}
.tabs a:hover,
.tabs a.inactive:hover {
color: #5685bc;
outline: none;
}
.container {
clear: both;
width: 100%;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
text-align: left;
padding-top: 20px;
}
.container h2 {
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
color: #5685bc;
}
.container p {
margin-left: 15px;
margin-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.3;
font-size: small;
}
.container ul {
margin-left: 25px;
font-size: small;
line-height: 1.4;
list-style-type: disc;
}
.container li {
padding-bottom: 5px;
margin-left: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<a id="tab1">test1</a>
<a id="tab2">test2</a>
<a id="tab3">test3</a>
<a id="tab4">test4</a>
</div>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>
<div class="tabs">
<a id="tab5">test1</a>
<a id="tab6">test2</a>
<a id="tab7">test3</a>
<a id="tab8">test4</a>
</div>
<div class="container" id="tab5C">5Some content</div>
<div class="container" id="tab6C">6Some content</div>
<div class="container" id="tab7C">7Some content</div>
<div class="container" id="tab8C">8Some content</div>
<div class="tabs">
<a id="tab5">test1</a>
<a id="tab6">test2</a>
<a id="tab7">test3</a>
<a id="tab8">test4</a>
</div>
<div class="container" id="tab5C">5Some content</div>
<div class="container" id="tab6C">6Some content</div>
<div class="container" id="tab7C">7Some content</div>
<div class="container" id="tab8C">8Some content</div>