我正在开发一个功能,其中有不同的选项卡组。 我希望每一组选项卡都可以独立运作。我的意思是:任何其他选项卡都必须干扰其他组的行为。如何为不同的选项卡设置单独的行为?
到目前为止,我在代码中遇到的唯一错误是,当您单击第一组的任一选项卡时,其他组的选项卡的内容将消失。
而且我需要默认情况下每个集合的第一个选项卡始终处于选中状态。
$(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>