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.
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
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/
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With