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')

Bootstrap jQuery在pageload上显示特定的选项卡

1 个答案: