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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -