How to open a Bootstrap modal with a specific tab active

Question

I am trying to have the tab within the bootstrap modal open depending on what link is being clicked. No matter what I've tried it will only open up on the first tab. The two links are the following:

<a href="#tab-mileage" data-toggle="modal" data-target="#buyers-report-modal" >Mileage</a>
<a href="#tab-wrong-vehicle" data-toggle="modal" data-target="#buyers-report-modal">Wrong vehicle?</a>

and the markup for the modal is here:

<div class="modal" id="buyers-report-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-offset-top">
    <div class="modal-content">
    <div class="modal-body">
    <div class="sd-tabs sd-tab-interaction">
      <div class="row">
        <ul class="nav nav-tabs col-md-3 custom-bullet">

          <li class="active"><a data-toggle="tab" href="#tab-wrong-vehicle"> Wrong Vehicle?</a></li>
          <li><a data-toggle="tab" href="#tab-mileage"> Mileage</a></li>

        </ul>
        <div class="tab-content col-md-9">
          <form id="tab-wrong-vehicle" class="tab-pane active" action="" method="post"> <!-- Wrong Vehicle? -->

            <h3 class="tab-title">Tab 1</h3>

          </form> <!-- Wrong Vehicle? -->



          <form id="tab-mileage" class="tab-pane"> <!-- Mileage -->

            <h2 class="tab-title-resp hidden-md hidden-lg"> Mileage</h2>
            <h3 class="tab-title">Tab 2</h3>

          </form> <!-- Mileage -->

        </div>
      </div>
    </div>
  </div>
</div>

I need the modal to open up on the link that is clicked, for example,if I were to click on the second link it would open up the second tab in the modal. Any help would be greatly appreciated, I haven't been able to find a solution to this anywhere.

I left the original ID's in the code incase I made a mistake in replacing them.

Solution 1

I've added a class .modal-toggle to the <a> elements which toggle the modals. Further, I've added some additional function which triggers on click and get's the href of the clicked element, after that I'm using tab("show") on the <a> element inside the <li> which matches the href. (I've added a close button inside your modal, so it's easier to test the demo)

$('.modal-toggle').click(function(e){
    var tab = e.target.hash; 
    $('li > a[href="' + tab + '"]').tab("show");
});

Demo Fiddle

Solution 2

Take benefit of the shown.bs.modal event. The event holds info about the href of the clicked <a>, and then you can change the tab according to that :

$("#buyers-report-modal").on('shown.bs.modal', function(e) {
    var tab = e.relatedTarget.hash;
    $('.nav-tabs a[href="'+tab+'"]').tab('show')
})   

your code working -> http://jsfiddle.net/pvo1sny8/

Solution 3

You need to target the tab's anchor and run the $.tab('show') function.

http://getbootstrap.com/javascript/#tabs

Since you know the tab anchor has attributes of data-toggle=tab and the href=id we can use a href from the link to pass to the selector for the tab.

$('a[data-toggle=modal][data-target]').click(function () {
    var target = $(this).attr('href');
    $('a[data-toggle=tab][href=' + target + ']').tab('show');
})

DEMO: http://jsfiddle.net/SeanWessell/2ct9zuu9/

Comments

[Madushan Perera]

This should be the answer. Great stuff @davidkonrad.

[devXen]

This is the Bootstrap way to do it.