时间戳

首页 > 解决方案 > Bootstrap 选项卡内容显示问题

jquery - Bootstrap 选项卡内容显示问题

问题描述

我有以下代码：

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();
  });
})

单击报告选项卡时，报告选项卡上的内容显示在选择窗格的内容下方。无论“选择”窗格上的内容如何，​​我如何才能让这个显示在顶部？

标签： jqueryhtmlbootstrap-4

解决方案

请找到这个答案..我认为您的 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>

推荐阅读