-1

It feels like i have checked all related questions but am still not able to solve the following issue:

within a bootstrap tabs wizard each tab-pane has content and a next button that should show the next tab-pane on click.

See my short JavaScript section which should simply show the second tab and its content (id="step2") on click of the next button with íd="a1".

I just cant get it to work; Thanks for your help!

$( document ).ready(function(){

$("#a1").click(function(){
    $(".nav-tabs a[href='#step2']").tab("show")
});

});
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>

<div class="container" id="myWizard">

<div class="navbar">
<div class="navbar-inner">

<ul class="nav nav-tabs" role="tablist" id="mytabs">
<li class="active"><a href="#step1" aria-controls="step1" role="tab" data-toggle="tab" id="ali1">1</a></li>
<li><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab" id="ali2">2</a></li>
<li><a href="#step3" aria-controls="step3" role="tab" data-toggle="tab" id="ali3">3</a></li>
<li><a href="#step4" aria-controls="step4" role="tab" data-toggle="tab" id="ali4">4</a></li>
<li><a href="#step5" aria-controls="step5" role="tab" data-toggle="tab" id="ali5">5</a></li>
</ul>

</div>
</div>
   
<div class="tab-content">
   
<div role="tabpanel" class="tab-pane active" id="step1">content1
<a class="btn next" id="a1">Continue</a>
</div>
      
<div role="tabpanel" class="tab-pane" id="step2">content2               
<a class="btn next" id="a2">Continue</a>
</div>
      
<div role="tabpanel" class="tab-pane" id="step3">content3
<a class="btn next" id="a3">Continue</a>
</div>
      
<div role="tabpanel" class="tab-pane" id="step4">content4
<a class="btn next" id="a4">Continue</a>
</div>
      
<div role="tabpanel" class="tab-pane" id="step5">content5
<a class="btn first" id="a5">Done</a>
</div>

</div>

</div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</body>
</html>
chiefr
  • 35
  • 9
  • You are using .tab("show") check it if it's not .tabs("show") – Raider Dec 05 '15 at 13:06
  • Possible duplicate of [script order for jquery with bootstrap](http://stackoverflow.com/questions/16926086/script-order-for-jquery-with-bootstrap) – chiefr Nov 15 '16 at 04:09

2 Answers2

1

Have a look at this it works ok

All I did was change line to this but it's not really needed to add the li

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

As was said below, you must get jQuery first, then bootstrap javascript

StudioTime
  • 22,603
  • 38
  • 120
  • 207
0

enter image description herePlease change your script initialization like this. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

and try. it is working for me.

first you have write your jquery initailization file.

thanks.

Priya Rajaram
  • 340
  • 2
  • 14