Bootstrap проблема отображения содержимого вкладки

Question

У меня есть следующий код:

Html

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" role="tablist" id="tabs_list">
      <li class="nav-item">
        <a class="nav-link active" role="tab" id="selections_tab" href="#selections_pane" data-toggle="tab">Selections</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" role="tab" id="report_tab" href="#report_tab_pane" data-toggle="tab">Report</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab_content">
      <div class="tab-pane fade show active" id="selections_pane" role="tabpanel">

        <button id="submit_btn">Generate</button>
      </div>
      <div id="report_tab_pane" class="tab-pane fade" role="tabpanel">
        hello
      </div>
    </div>
  </div>
</div>

jQuery

$(function(){
    $("#submit_btn").on('click', function(){
        $('#report_tab').removeClass('disabled');
        $("#report_tab").click();
  });
})

При нажатии на вкладку «Отчеты» содержимое на Вкладка «Отчеты» отображается под содержимым панели выбора. Как я могу сделать это шоу вверху независимо от содержания на панели «Выборы»?

Answer 1

пожалуйста, найдите этот ответ .. я думаю, что есть некоторые проблемы с вашим html фрагментом ..

$(function(){
    $("#submit_btn").on('click', function(){
        $('#report_tab').removeClass('disabled');
        $("#report_tab").trigger('click');
  });
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <ul class="nav nav-tabs card-header-tabs" role="tablist" id="tabs_list">
      <li class="nav-item">
        <a class="nav-link active" role="tab" id="selections_tab" href="#home" data-toggle="tab">Selections</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" role="tab" id="report_tab" href="#profile" data-toggle="tab">Report</a>
      </li>
    </ul>

	<div class="tab-content">
	  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
		<div class="card p-4">
			<button id="submit_btn" type="button" class="btn btn-success w-25">click here</button>
		</div>	
        </div>
		  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
			<div class="card p-4">
				<p>report comes here</p>	
			</div>
		</div>
	</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 2

Вы можете добавить одну строку к вашему JS:

$('#selections_pane').hide();

И если вам снова понадобится содержимое первой вкладки:

$('#selections_tab').click(()=>{

    $('#selections_pane').show();
});

$('#report_tab').click(function(){
    if(!$(this).hasClass('disabled')) $('#selections_pane').hide();
});

 $(function(){
    $("#submit_btn").on('click', function(){
        $('#report_tab').removeClass('disabled');
        $('#selections_pane').hide();
        $("#report_tab").tab('show');
    });

    $('#selections_tab').click(()=>{

        $('#selections_pane').show();
    });

    $('#report_tab').click(function(){
	    if(!$(this).hasClass('disabled')) $('#selections_pane').hide();
    });
})
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>



<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" role="tablist" id="tabs_list">
      <li class="nav-item">
        <a class="nav-link active" role="tab" id="selections_tab" href="#selections_pane" data-toggle="tab">Selections</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" role="tab" id="report_tab" href="#report_tab_pane" data-toggle="tab">Report</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab_content">
      <div class="tab-pane fade show active" id="selections_pane" role="tabpanel">
      <span>sfsdfsdfsdf</span><br><br>
      <span>sfsdfsdfsdf</span><br>
      <span>sfsdfsdfsdf</span><br>
      <span>sfsdfsdfsdf</span><br>
      <span>sfsdfsdfsdf</span><br>
      <span>sfsdfsdfsdf</span><br>
      <span>sfsdfsdfsdf</span>
      <button id="submit_btn">Generate</button>
      </div>
      <div id="report_tab_pane" class="tab-pane fade" role="tabpanel">
        hello
      </div>
    </div>
  </div>
</div>
 

Answer 3

вместо вызова функции click() на $("#report_tab"), используйте функцию Bootstrap tab('show')

$(function(){
    $("#submit_btn").on('click', function(){
        $('#report-tab').removeClass('disabled');
        $("#report-tab").click();
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs_list" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="selections-tab" data-toggle="tab" href="#selections" role="tab" aria-controls="selections" aria-selected="true">Selections</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="report-tab" data-toggle="tab" href="#report" role="tab" aria-controls="report" aria-selected="false">Report</a>
  </li>
</ul>
</div>
  <div class="card-body">
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="selections" role="tabpanel" aria-labelledby="selections-tab"><button id="submit_btn">Generate</button></div>
  <div class="tab-pane fade" id="report" role="tabpanel" aria-labelledby="report-tab">hello</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>