选择第一个可见元素时遇到问题

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, self) {
	var relatedSection = $('#' + toRevealId).attr('data-section');

	
	if(self.is(':checked')){
		$('#' + toRevealId).addClass('inline-block');
		$('#' + toRevealId).addClass('tab_active');
		$('#' + toRevealId).siblings().removeClass('tab_active');
		$('#' + relatedSection).siblings().removeClass('active');
		$('#' + relatedSection).addClass('block');
		$('#' + relatedSection).addClass('active');
	}

	if ($('#'+self.attr('data-header')).hasClass('tab_active')){
                        var count = $(".tab-header:visible").length;        
		 if(self.is(':checked') == false && count > 0){
    	 	$(".tab-header:visible:first").addClass('tab_active');
    	 	$('#'+$(".tab-header:visible:first").attr('data-section')).addClass('active');
    	}
	}
	
	if(self.is(':checked') == false){
		$('#' + toRevealId).removeClass('inline-block');
		$('#' + toRevealId).removeClass('tab_active');
		$('#' + relatedSection).removeClass('block');
		$('#' + relatedSection).removeClass('active');
	}
}

$(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);
	    showSection('relative_tabs', self.attr('data-header'), self);
	});

});

.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>
	
	<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>
			</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 class="tab-content" id="Guardian_info">Guardian Info</div>
		</div>
	</div>
</form>

以下是测试/编辑的小提琴： https://jsfiddle.net/s83evtrm

除以下情况外，一切正常：

1-当我从父亲复选框开始选中所有3个复选框时，然后取消选中“监护人”“父亲”选项卡变为活动状态，当我取消选中“父亲”母亲选项卡应变为活动状态时，但这没有发生，我在其中打印了第一个可见元素案件，它返回父亲而不是母亲。

我认为可以通过移动第三个条件来解决此问题：

if(self.is(':checked') == false){
    $('#' + toRevealId).removeClass('inline-block');
    $('#' + toRevealId).removeClass('tab_active');
    $('#' + relatedSection).removeClass('block');
    $('#' + relatedSection).removeClass('active');
}

在第二个之前：

if ($('#'+self.attr('data-header')).hasClass('tab_active')){
    var count = $(".tab-header:visible").length;
     if(self.is(':checked') == false && count > 0){
        $(".tab-header:visible:first").addClass('tab_active');
        $('#'+$(".tab-header:visible:first").attr('data-section')).addClass('active');
    }
}

但是在这种情况下，变为第三条件的第二条件将不起作用。

2-当我选中除父亲以外的任何其他复选框时，然后选中另一个，然后选中父亲，然后取消选中父亲，其他两个选项卡均未激活。

PS：要使标签页处于活动状态，请将tab_active类添加到标签页标题（“父亲”，“母亲”，.. etc），并将active添加到内容（“父亲”信息”，“母亲信息”，.. etc）

如何解决这个问题？

Answer 1

您可以尝试在所有选项卡均未激活的情况下强行单击第一个选定的输入：

// 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, self) {
  var relatedSection = $('#' + toRevealId).attr('data-section');

  if (self.is(':checked')) {
    $('#' + toRevealId).addClass('inline-block');
    $('#' + toRevealId).addClass('tab_active');
    $('#' + toRevealId).siblings().removeClass('tab_active');
    $('#' + relatedSection).siblings().removeClass('active');
    $('#' + relatedSection).addClass('block');
    $('#' + relatedSection).addClass('active');
  }

  if ($('#'+self.attr('data-header')).hasClass('tab_active')) {
    var count = $('.tab-header:visible').length;
    if (self.is(':checked') == false && count > 0) {
      $('.tab-header:visible:first').addClass('tab_active');
      $('#' + $('.tab-header:visible:first').attr('data-section')).addClass('active');
    }
  }

  if (self.is(':checked') == false) {
    $('#' + toRevealId).removeClass('inline-block');
    $('#' + toRevealId).removeClass('tab_active');
    $('#' + relatedSection).removeClass('block');
    $('#' + relatedSection).removeClass('active');
  }
}

$(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);
    showSection('relative_tabs', self.attr('data-header'), self);
    // If none of the tabs are active, then activate the first one by unchecking and rechecking it.
    if (!$('.tab_active').length) {
      $('input:checked').first().click().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>

  <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>
      </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 class="tab-content" id="Guardian_info">Guardian Info</div>
    </div>
  </div>
</form>