Question

我想要一个交互式导航，其中两个是左对齐的（“第一”和“第二”），另一个是右对齐的（“更多”）。目前，我可以在“第一”和“第二”之间切换，而不会出现问题。但是，如果我选择“更多”，则可以切换回“第一”或“第二”，但不能再切换回“更多”，因为无法将其停用。

是否可以将两个选项卡列表都视为一个选项卡，或者仅使用一个选项卡列表且左侧有两个选项卡，而右侧是一个选项卡？

Js fiddle link

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Site</title>
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Site</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav nav" id="nav-tab" role="tablist">
                    <a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first"
                        role="tab" aria-controls="nav-first" aria-selected="true">First</a>
                    <a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab"
                        aria-controls="nav-second" aria-selected="false">Second</a>
                </div>

                <div class="navbar-nav nav ml-auto" id="nav-tab-right" role="tablist">
                    <a class="nav-item nav-link" id="nav-more-tab" data-toggle="tab" href="#nav-more" role="tab"
                        aria-controls="nav-more" aria-selected="false">More</a>
                </div>
            </div>
        </nav>

        <div class="tab-content" id="nav-tabContent">
            <!--First tab-->
            <div class="tab-pane show active" id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab">
                <p>First!</p>
            </div>

            <!--Second tab-->
            <div class="tab-pane" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">
                <p>Second!</p>
            </div>

            <!--More tab-->
            <div class="tab-pane" id="nav-more" role="tabpanel" aria-labelledby="nav-more-tab">
                <p>More!</p>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    </script>
</body>

</html>

Answer 1

Bootstrap的默认JavaScript并非完全是“魔术” ，尽管有时也是如此。为了使它起作用，必须做出某些假设。其中之一是您尊重提供的标记。

您还没有。就您而言，您不是仅从一个父role="tablist"容器中控制标签列表，而是从两个父容器中控制标签列表。因此，您需要自己取消选择：

$(function() {
  $('#navbarNavAltMarkup').on('click', '[role="tab"]', function(e) {
    $('[role="tab"].active', $(this).closest('.navbar-collapse')).each((i, el) => {
      $(el).removeClass('active show');
      $(el).attr('aria-selected', 'false');
    })
  })
});

看到它正常工作：

$(function() {
  $('#navbarNavAltMarkup').on('click', '[role="tab"]', function(e) {
    $('[role="tab"].active', $(this).closest('.navbar-collapse')).each((i, el) => {
      $(el).removeClass('active show');
      $(el).attr('aria-selected', 'false');
    })
  })
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Site</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav nav" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-selected="true">First</a>
        <a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" aria-selected="false">Second</a>
      </div>

      <div class="navbar-nav nav ml-auto" id="nav-tab-right" role="tablist">
        <a class="nav-item nav-link" id="nav-more-tab" data-toggle="tab" href="#nav-more" role="tab" aria-controls="nav-more" aria-selected="false">More</a>
      </div>
    </div>
  </nav>

  <div class="tab-content" id="nav-tabContent">
    <!--First tab-->
    <div class="tab-pane show active" id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab">
      <p>First!</p>
    </div>

    <!--Second tab-->
    <div class="tab-pane" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">
      <p>Second!</p>
    </div>

    <!--More tab-->
    <div class="tab-pane" id="nav-more" role="tabpanel" aria-labelledby="nav-more-tab">
      <p>More!</p>
    </div>
  </div>
</div>

另一种可能的解决方案是将所有选项卡控件保留在同一选项卡列表的父级中，并根据需要使用自定义CSS放置它们：

@media(min-width: 992px) {
  #navbarNavAltMarkup .navbar-nav:first-child{
    flex-grow: 1;
  }
  #navbarNavAltMarkup .nav-item:last-child{
    margin-left: auto;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Site</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav nav" id="nav-tab" role="tablist">
      <a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-selected="true">First</a>
      <a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" aria-selected="false">Second</a>
      <a class="nav-item nav-link" id="nav-more-tab" data-toggle="tab" href="#nav-more" role="tab" aria-controls="nav-more" aria-selected="false">More</a>
    </div>
  </div>
</nav>

为了全面，我承认我期望Bootstrap 4变得更聪明。我解决此问题的第一个尝试是简单地从每个role="tablist"中删除.nav并将其放置在公共父级上。
并且 它应该已经起作用了！ 。

但是，如果我们研究BS's source code，我们会发现它们使用NAV_LIST_GROUP: '.nav, .list-group',作为列表选择器，而不是[role="tablist"]，我很难理解为什么。

恕我直言，应该使用role，因为它已经满足了屏幕阅读器的相同要求“ role” （它声明：在我的标记中，您会找到一个标签控件列表，每个标签控件都标记为role="tab"）。他们（Bootstrap团队）可能担心新手编码人员将删除/忽略role属性，并且选项卡将停止工作。好吧，当/如果您删除role属性，它们将不起作用。一些用户依靠这些属性来更快地读取/查找相关内容。

Answer 2

我发现一种可能的快速解决方案是添加以下javascript代码，该代码手动设置正确的类和属性，覆盖默认实现

columnDefinition = "TINYINT(1)"

Bootstrap导航互动式左右列表

2 个答案: