时间戳

首页 > 解决方案 > 如何使用 prev 和 next 按钮遍历带有嵌套下拉菜单的 Bootstrap 选项卡式导航菜单？

javascript - 如何使用 prev 和 next 按钮遍历带有嵌套下拉菜单的 Bootstrap 选项卡式导航菜单？

问题描述

我有一个带有嵌套下拉菜单的选项卡式导航模板。上一个和下一个按钮应提供通过每个选项卡的辅助导航。这些按钮一直有效，直到它们需要浏览下拉导航中的页面。如果您使用下一步按钮前进到讲座，下拉菜单中的所有页面/讲座将显示在按钮下方。

我不确定在 js 中写出 if/else 部分的最佳方法。不确定是否最好根据我目前的情况来查看 if/else 还是从头开始。我需要帮助来弄清楚如何让脚本在用于导航的整个列表中前进和后退。

     $('.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">&times;</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>

标签： javascriptjqueryhtmlbootstrap-4navigation

解决方案

这是一个使用而不是的工作演示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">&times;</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>

推荐阅读