javascript - trying to change nav tabs active class within a modal on click of separate buttons bootstrap -
i have nav tabs within modal shown. using meteor framework.
here modal link sign button (there button called login links same modal):
<button class="btn btn-primary full-width center-text" data-toggle="modal" id="signupmodalbutton" data-target="#signupmodal">sign up</button>
if model called sign button, want signup tab within modal active if model called login button, want login tab within modal active
<div class="modal automodal" id="signupmodal" tabindex="-1" data-keyboard="false" role="dialog" aria-labelledby="signupmodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <!-- nav tabs --> <ul class="nav nav-tabs" role="tablist" id="signuplogintabs"> <li class="{{if clicked sign should active"><a href="#signup" role="tab" data-toggle="tab">sign up</a></li> <li class="{{if clicked login in should active}}"><a href="#login" role="tab" data-toggle="tab">log in</a></li> </ul> </div> </div> </div> </div>
you can add or remove class on each button's click:
$('#signupmodalbutton') .on('click', function() { $('li:first-child').addclass('active'); }); $('#loginbutton') .on('click', function() { $('li:last-child').addclass('active'); });
Comments
Post a Comment