html - Bootstrap nav 交互式标签列表左右

标签 html css twitter-bootstrap bootstrap-4

我想要交互式导航，其中两个左对齐(“第一”和“第二”)，一个右对齐(“更多”)。目前，我可以毫无问题地在“第一”和“第二”之间切换。然而，如果我选择“更多”，我可以切换回“第一”或“第二”，但不能再切换回“更多”，因为它无法停用。

有没有一种方法可以将两个选项卡列表视为一个选项卡列表，或者只使用一个选项卡列表，左侧有两个选项卡，右侧有一个选项卡？

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>

最佳答案

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 更智能。我第一次尝试解决这个问题是简单地从每个 .nav 中删除 role="tablist" 并将其放在共同的父级上。
而且它应该有效!。

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

恕我直言，应该使用它的是 Angular 色，因为它已经为屏幕阅读器完成了完全相同的“Angular 色”(它声明:在我的标记中的某处你'您将找到一个选项卡控件列表，并且每个控件都被标记为 role="tab")。他们(Bootstrap 团队)可能担心新手编码员会删除/省略 role 属性并且选项卡将停止工作。好吧，当/如果您删除 role 属性时，它们不应该工作。一些用户依靠这些属性来更快地阅读/找到相关内容。

关于html - Bootstrap nav 交互式标签列表左右，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58844954/

上一篇：javascript - 在不使用 .math 或 .pow 函数的情况下制作计算指数/幂的计算器时需要帮助。使用循环

下一篇：javascript - 在javascript中重复使用的另一个函数中执行一个函数的最佳方法

相关文章：

javascript - 根据内容的高度调整 iFrame 的大小只能放大？

javascript - 获取 DIV 的子输入数据属性

html - iPad Safari 上的下拉问题

javascript - Bootstrap JavaScript 滚动问题

php - 无法让 Twitter Typeahead 在 Bootstrap 中工作

javascript - 使用对象中的值填充嵌套名称的输入

html - 使文本显示在图像 HTML 和 CSS 之上

html - 为什么 span 超出底部对齐，我该如何操作它

css - 我的 CSS 没有通过我的内容脚本注入(inject)

html - 内联单选按钮 Bootstrap 的标签

©2024 IT工具网  联系我们