CODEWITHSUNDEEP
jquerytwitter-bootstrap
Kenneth Poulsen
Kenneth Poulsen

Reputation: 949

Bootstrap jQuery show specific tab on pageload

I'm trying to show a specific tab, after a form has been submitted. The page does some calculations, when a form is submitted, and I would like to show the results in a specific tab.

This is the code I have now:

$(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>

Upvotes: 1

Views: 3711

Answers (1)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with the solution 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>

Here in the example, I'm moving to "Informationer" tab on page load whereas in your case once you submit the form you move to the tab using the following JavaScript code

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

Upvotes: 3

Related Questions