如何使用上一个和下一个按钮遍历带有嵌套下拉菜单的Bootstrap选项卡式导航菜单？
[英]How do I traverse a Bootstrap tabbed navigation menu with nested dropdown using prev and next button?
问题描述
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. 我不确定在js中编写if / else片段的最佳方法。 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 个解决方案
解决方案1
0 已采纳 2019-07-20 07:25:32
Here is a working demo using tab('show') instead of trigger('click') 这是一个使用tab('show')代替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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery，Bootstrap导航-如何添加上一个/下一个按钮？ - JQuery, Bootstrap navs - how do I add prev/next buttons?
我尝试向其中添加Bootstrap下拉按钮， <a>但下拉菜单无法正常工作。</a> <a>我该怎么做呢？</a> - I tried to add a Bootstrap dropdown button to <a> but the dropdown menu wont work. How do I do this?
我如何控制多个 div 正在使用带有 jquery 的下一个/上一个按钮 - how do i control multiple div is using next/prev button with jquery
Traverse dom，next，prev - Traverse dom, next, prev
使用下拉菜单链接进行引导选项卡导航 - Bootstrap tab navigation using dropdown menu links
如何通过下一个/上一个链接循环浏览多个Bootstrap3模态 - How do I cycle through multiple Bootstrap3 modals with next/prev links
prev next功能用于引导中的嵌套选项卡 - prev next function for nested tabs in bootstrap
菜单遍历next和prev按钮单击 - menu traversing on next and prev button click
Bootstrap轮播下一个上一个按钮控制 - Bootstrap carousel next prev button control
Bootstrap 5 带有 Next/Prev 按钮的选项卡，没有 jQuery - Bootstrap 5 Tabs with Next/Prev Button without jQuery
相关标签