javascript - Bootstrap tabs - Next & previous Buttons -
i using bootstrap 3.4.
i using tab-pills on form 3 tabs.
i trying place next & previous buttons aid navigation between tab form.
i have read post on topic (and bootply), require, , applied necessary code.
on form, in 3 tabs, see next1 button, never see other buttons.
i figured out error class=active on <li class="active">
line of code> (or @ least error).
i have searched google , figure out how js code working, cannot figure out correct simple issue. have exhausted attempts, turn assistance.
can suggest how might correct this?
here js code:
$('.btnnext').click(function(){ $('.nav-pills > .active').next('li').find('a').trigger('click'); }); $('.btnprevious').click(function(){ $('.nav-pills > .active').prev('li').find('a').trigger('click'); });
here html code:
<ul class="nav nav-pills"> <li class="active"> <a data-toggle="tab" id="id_link_tab1" href="#tab1"> <i class="fa fa-check-square-o icon_size26"></i> tab #1 </a> </li> <li class=""> <a data-toggle="tab" id="id_link_tab2" href="#tab2"> <i class="fa fa-file-text icon_size26"></i> tab #2 </a> </li> <li class=""> <a data-toggle="tab" id="id_link_tab3" href="#tab3"> <i class="fa fa-pencil-square-o icon_size26"></i> tab #3 </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <a class="btn btn-primary btnnext">next1</a> </div> <div class="tab-pane" id="tab2"> <a class="btn btn-primary btnnext">next2</a> <a class="btn btn-primary btnprevious">previous3</a> </div> <div class="tab-pane" id="tab3"> <a class="btn btn-primary btnprevious">previous4</a> </div> </div>
Comments
Post a Comment