javascript - 使用复选框在选项卡之间切换

Question

我有 3 个部分的选项卡部分，每个选项卡都有自己的标题和内容。

但我不想显示所有 3 个选项卡，只是用户通过选中相关复选框选择的内容，有 3 个相关复选框，每个选项卡一个。

代码如下:

//Function to hide all siblings but leave the clicked one
function hideAllChildrenButOne(parentId, toRevealId) {
	$('#' + parentId).children().css('display', 'none');
	$('#' + toRevealId).css('display', 'block');
}

//Function to show the tab header and content when a checkbox is checked
function showSection(parentId, toRevealId) {
	var relatedSection = $('#' + toRevealId).attr('data-section');
	$('#' + toRevealId).toggleClass('inline-block');
	$('#' + toRevealId).siblings().removeClass('tab_active');
	$('#' + toRevealId).toggleClass('tab_active');
	$('#' + relatedSection).toggleClass('active');
	$('#' + relatedSection).siblings().removeClass('active');
	$('#' + relatedSection).toggleClass('block');
	
	if ($('input[data-header=' + toRevealId + ']').is(':checked')) {
	}else{
	}
}

$(document).ready(function() {

	//On clicking a tab header('Father', 'Mother', 'Brother')
	$('.tab-header').click(function(event) {
		$(this).addClass('tab_active').siblings().removeClass('tab_active');
	    var related_section = $(this).attr('data-section');
	    hideAllChildrenButOne('relative_content', related_section);
	});

	//On changing any checkbox with name=relative[]
	$("input[name='relative[]']").change(function() {
	    var self = $(this);
	    console.log(self.value);
	    showSection('relative_tabs', self.attr('data-header'));
	});

});

.relative_container{
    position: relative;
    padding: 45px 15px 15px;
    margin: 0 -15px 15px;
    border-color: #e5e5e5 #eee #eee;
    border-style: solid;
    border-width: 1px 0;
    -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
@media (min-width: 768px){
	.relative_container {
	    margin-right: 0;
	    margin-left: 0;
	    background-color: #fff;
	    border-color: #ddd;
	    border-width: 1px;
	    border-radius: 4px 4px 0 0;
	    -webkit-box-shadow: none;
	    box-shadow: none;
	}
}
.relative_tabs{
	margin-bottom: 15px;
	border-bottom: 1px solid #ddd;
	list-style: none;
	padding: 7px 0;
}
.relative_tabs:before{
	display: table;
	content: " ";
}	
.tab-header{
	display: none;
	margin-bottom: -1px;
}
.tab-header>a{
	margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    padding: 9px 15px;
    text-decoration: none;
    cursor: pointer;
}
.tab-header.tab_active>a{
	color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
.relative_content div{
	display: none;
}
.relative_content>div.active{
	display: block;
}
.tab-content{
	display: none;
}
.hidden{
	display: none;
}
.inline-block{
	display: inline-block;
}
.block{
	display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
	<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab"></label>
	<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab"></label>
	<label>Guardian<input type="checkbox" name="relative[]" value="Guardian"></label>
	<label>Other<input type="checkbox" name="relative[]" value="Other"></label>
	<div class="relative_container">
		<div class="relative_header">
			<ul class="relative_tabs" id="relative_tabs">
				<li id="father-tab" data-section="Father_info" class="tab-header">
					<a>Father</a>
				</li> 
				<li data-section="Mother_info" class="tab-header" id="mother-tab">
					<a>Mother</a>
				</li>
			</ul>
		</div>
		<div class="relative_content" id="relative_content">
			<div class="tab-content" id="Father_info">Father Info</div>
			<div class="tab-content" id="Mother_info">Mother Info</div>
		</div>
	</div>
</form>

有一个问题:

当我选中超过 1 个复选框时，相关选项卡会显示，但只有最后一个选中的选项卡处于事件状态，但是当我取消选中所有选项卡时，除了一个被选中的选项卡不处于事件状态。

因此，如果用户选中了多个复选框并选中了除一个以外的所有复选框，则该复选框应该变为事件状态。

Answer 1

我认为 html 和 javascript 中的几个更改将帮助您获得预期的结果。在 html 中，我对选项卡和内容使用了几乎相似的 ID(只是不同之处在于内容具有“_info”后缀)。

请参阅下面的代码段:

$(document).ready(function() {
	//On clicking a tab header('Father', 'Mother', 'Brother')
    $('.tab-header').click(function(event) {
      $(this).addClass('tab_active').siblings().removeClass('tab_active');
	    $('#relative_content').children().css('display', 'none');
      $('#' + $(this).attr('id')+'_info').css('display', 'block');
    });

    //On changing any checkbox with name=relative[]
    $("input[name='relative[]']").change(function() {
      $('#' + $(this).data('header')).toggleClass('inline-block');
      
      if($(this)[0].checked){
         $('#' + $(this).data('header')).click();
      }else{
	      $('#relative_content').children().css('display', 'none');
        if($('.inline-block.tab_active').length == 0 && $('.tab-header.inline-block').length>0){
          $($('.tab-header.inline-block')[0]).click();
        }else{
          $($('.inline-block.tab_active')[0]).click();
        }
      }
	  });
});

.relative_container{
    position: relative;
    padding: 45px 15px 15px;
    margin: 0 -15px 15px;
    border-color: #e5e5e5 #eee #eee;
    border-style: solid;
    border-width: 1px 0;
    -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
@media (min-width: 768px){
	.relative_container {
	    margin-right: 0;
	    margin-left: 0;
	    background-color: #fff;
	    border-color: #ddd;
	    border-width: 1px;
	    border-radius: 4px 4px 0 0;
	    -webkit-box-shadow: none;
	    box-shadow: none;
	}
}
.relative_tabs{
	margin-bottom: 15px;
	border-bottom: 1px solid #ddd;
	list-style: none;
	padding: 7px 0;
}
.relative_tabs:before{
	display: table;
	content: " ";
}	
.tab-header{
	display: none;
	margin-bottom: -1px;
}
.tab-header>a{
	margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    padding: 9px 15px;
    text-decoration: none;
    cursor: pointer;
}
.tab-header.tab_active>a{
	color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
.relative_content div{
	display: none;
}
.relative_content>div.active{
	display: block;
}
.tab-content{
	display: none;
}
.hidden{
	display: none;
}
.inline-block{
	display: inline-block;
}
.block{
	display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
	<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab"></label>
	<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab"></label>
	<label>Guardian<input type="checkbox" name="relative[]" value="Guardian" data-header="guardian-tab"></label>
	<label>Other<input type="checkbox" name="relative[]" value="Other" data-header="other-tab"></label>
	<div class="relative_container">
		<div class="relative_header">
			<ul class="relative_tabs" id="relative_tabs">
				<li id="father-tab" data-section="Father_info" class="tab-header">
					<a>Father</a>
				</li> 
				<li data-section="Mother_info" class="tab-header" id="mother-tab">
					<a>Mother</a>
				</li>
				<li data-section="Guardian_info" class="tab-header" id="guardian-tab">
					<a>Guardian</a>
				</li>
				<li data-section="Other_info" class="tab-header" id="other-tab">
					<a>Other</a>
				</li>
			</ul>
		</div>
		<div class="relative_content" id="relative_content">
			<div class="tab-content" id="father-tab_info">Father Info</div>
			<div class="tab-content" id="mother-tab_info">Mother Info</div>
			<div class="tab-content" id="guardian-tab_info">Guardian Info</div>
			<div class="tab-content" id="other-tab_info">Other Info</div>
		</div>
	</div>
</form>

可以测试一下here还有。