How do I traverse a Bootstrap tabbed navigation menu with nested dropdown using prev and next button?
Question
I've a template that has tabbed navigation with a nested dropdown menu. The previous and next buttons should provide secondary navigation through each of the tabs. The buttons work until they need to go through the pages in the dropdown navigation. If you use the Next button to advance to a lecture, all of the pages/lectures in the dropdown will be displayed below the buttons.
I'm not sure of the best way to approach writing out the if/else piece in the js. Not sure if it's better to look at if/else based on what I have so far or start from scratch. I need help with figuring out how to get the script to go forwards and backwards through the entire list used for navigation.
$('.btnNext').click(function () {
$('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<body>
<nav role="navigation">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" href="#page1" role="tab" >Welcome</a></li>
<li class="nav-item">
<a href="#page2" id="tab2" data-toggle="tab" role="tab" class="nav-link">Activities</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Lectures</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab3" href="#page3">Lecture 1</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab4" href="#page4">Lecture 2</a>
<a class="dropdown-item" data-toggle="tab" role="tab" id="tab5" href="#page5">Lecture 3</a>
</div>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="overview-tab">
<h2>Overview</h2>
<p>Page 1. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
</div>
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="activities-tab">
<h2>Activities</h2>
Page 2.
<div class="alert alert-info fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p class="text-center">If you have questions regarding any of these activities, make sure to post those questions in the <strong>Open Forum</strong>.</p>
</div>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="page3-tab">
<h2>Lecture 1</h2>
<p>Page 3.</p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="page4-tab">
<h2>Lecture 2</h2>
<p>Page 4. </p>
<div>
<a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a>
<a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
<div class="tab-pane fade" id="page5" role="tabpanel" aria-labelledby="page5-tab">
<h2>Lecture 3</h2>
<p>Page 5. </p>
<div>
<a type="button" class="btn btn-primary btnPrevious"><em class="fas fa-chevron-left"></em> Previous</a>
</div>
</div>
</div>
</body>
1 answers
solution1
0 ACCPTED 2019-07-20 07:25:32
Here is a working demo using tab('show') instead of trigger('click')
$('.btnNext').click(function() { if (!$('[data-toggle="tab"].active').next('[data-toggle="tab"]').first().tab('show').length) $('[data-toggle="tab"].active').parents('li').nextAll().find('[data-toggle="tab"]').first().tab('show') }); $('.btnPrevious').click(function() { if (!$('[data-toggle="tab"].active').prev('[data-toggle="tab"]').first().tab('show').length) $('[data-toggle="tab"].active').parents('li').prevAll().find('[data-toggle="tab"]').last().tab('show') });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <nav role="navigation"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="tab1" data-toggle="tab" href="#page1" role="tab">Welcome</a></li> <li class="nav-item"> <a href="#page2" id="tab2" data-toggle="tab" role="tab" class="nav-link">Activities</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Lectures</a> <div class="dropdown-menu"> <a class="dropdown-item" data-toggle="tab" role="tab" id="tab3" href="#page3">Lecture 1</a> <a class="dropdown-item" data-toggle="tab" role="tab" id="tab4" href="#page4">Lecture 2</a> <a class="dropdown-item" data-toggle="tab" role="tab" id="tab5" href="#page5">Lecture 3</a> </div> </li> </ul> </nav> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="overview-tab"> <h2>Overview</h2> <p>Page 1. </p> <div> <a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a> </div> </div> <div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="activities-tab"> <h2>Activities</h2> Page 2. <div class="alert alert-info fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> </div> <div> <a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a> <a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a> </div> </div> <div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="page3-tab"> <h2>Lecture 1</h2> <p>Page 3.</p> <div> <a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a> <a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a> </div> </div> <div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="page4-tab"> <h2>Lecture 2</h2> <p>Page 4. </p> <div> <a type="button" class="btn btn-primary btnNext nextRight">Next <em class="fas fa-chevron-right"></em></a> <a type="button" class="btn btn-primary btnPrevious"> <em class="fas fa-chevron-left"></em> Previous</a> </div> </div> <div class="tab-pane fade" id="page5" role="tabpanel" aria-labelledby="page5-tab"> <h2>Lecture 3</h2> <p>Page 5. </p> <div> <a type="button" class="btn btn-primary btnPrevious"><em class="fas fa-chevron-left"></em> Previous</a> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JQuery, Bootstrap navs - how do I add prev/next buttons?
I tried to add a Bootstrap dropdown button to <a> but the dropdown menu wont work. How do I do this?
how do i control multiple div is using next/prev button with jquery
Traverse dom, next, prev
Bootstrap tab navigation using dropdown menu links
How do I cycle through multiple Bootstrap3 modals with next/prev links
prev next function for nested tabs in bootstrap
menu traversing on next and prev button click
Bootstrap carousel next prev button control
Bootstrap 5 Tabs with Next/Prev Button without jQuery
Related Tags