jquery - Bootstrap jQuery 在页面加载时显示特定选项卡

Question

我正在尝试在提交表单后显示特定选项卡。当提交表单时，页面会进行一些计算，我想在特定选项卡中显示结果。

这是我现在的代码:

$(document).ready(function() {
    $('#tab_info').tab('show')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="formtabs" class="nav nav-tabs" style="margin-bottom:10px;">
   	  <li class="active"><a data-toggle="tab" href="#tab_form">Form</a></li>
	  <li><a data-toggle="tab" href="#tab_resultat">Resultat</a></li>
	  <li><a data-toggle="tab" href="#tab_formel">Formel</a></li>
	  <li><a data-toggle="tab" href="#tab_info">Informationer</a></li>
	</ul>
		
	<div class="tab-content">
	  <div id="tab_form" class="tab-pane active">
	    <div class="panel-body">Form</div>
	  </div>
	  <div id="tab_resultat" class="tab-pane">
	    <div class="panel-body">Resultat</div>
	  </div>
	  
      <div id="tab_formel" class="tab-pane">
	    <div class="panel-body">Formel</div>
	  </div>
  	  
      <div id="tab_info" class="tab-pane">
	    <div class="panel-body">Information</div>
	  </div>
	</div>

Answer 1

解决方案在这里 https://jsfiddle.net/nart6rat/

 $(document).ready(function() {
        $('.nav-tabs a[href="#tab_info"]').tab('show')
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="formtabs" class="nav nav-tabs" style="margin-bottom:10px;">
  <li class="active"><a data-toggle="tab" href="#tab_form">Form</a></li>
  <li><a data-toggle="tab" href="#tab_resultat">Resultat</a></li>
  <li><a data-toggle="tab" href="#tab_formel">Formel</a></li>
  <li><a data-toggle="tab" href="#tab_info">Informationer</a></li>
</ul>

<div class="tab-content">
  <div id="tab_form" class="tab-pane active">
    <div class="panel-body">Form</div>
  </div>
  <div id="tab_resultat" class="tab-pane">
    <div class="panel-body">Resultat</div>
  </div>

  <div id="tab_formel" class="tab-pane">
    <div class="panel-body">Formel</div>
  </div>

  <div id="tab_info" class="tab-pane">
    <div class="panel-body">Information</div>
  </div>
</div>

在此示例中，我将移至页面加载上的“信息员”选项卡，而在您的情况下，一旦您提交 使用以下JavaScript代码移动到选项卡的表单

$('.nav-tabs a[href="#tab_info"]').tab('show')