带有内容的 Bootstrap 4 选项卡无法正确使用仪表板

Question

我想使用 bootstrap 中的仪表板模板来构建一个简单的页面，但目前我无法在导航栏中使用不同的内容窗格在正文中实现选项卡。

总体而言，它使用两个窗格，但是当我从第一个窗格切换到第二个窗格并再次切换回第一个窗格时，我看到两个选项卡内容都显示了。当我再次切换时，它工作正常（尽管第一个选项卡内的列表元素不再设置为活动状态）。

我创建了一个无法正常工作的 jsfiddle，但 hunzaboys codepen 工作正常并显示了我的问题。

我的错误在哪里？为什么切换回来的时候会同时显示两个tab内容？

编辑：

似乎问题在于在标签竞争中嵌套了另一个导航栏，特别是在标签内有两个“活动”类似乎会导致问题（即使活动元素不是导航项目或其他东西）。

我做了一个新的例子：https://codepen.io/anon/pen/KXMoRV

如果您在顶部导航栏切换到“Einstellungen”并再次切换回“Überblick”，您将看到两个内容窗格同时处于活动状态。

如果您重新加载页面并从第 45 行的按钮中删除“活动”类，则不会发生这种情况。

                    <button class="btn btn-primary active" type="button">Test</button>

谁能帮帮我？

提前感谢您的帮助！

Answer 1

我自己解决了这个问题，因为我在任何地方都没有找到合适的答案或解决方案。

我没有在顶部导航栏及其每个内容窗格中使用引导程序中的导航功能，而是现在仅在内容窗格中使用引导程序导航并手动控制顶部导航栏。

我制作了一个显示当前状态和预期行为的代码笔：

https://codepen.io/anon/pen/KXWvLV

这里是手动控制 div 和模拟导航行为的代码：

$("#link-overview").on("click", function () {
    console.log("[INFO] Showing overview");
    $("#pane-overview").show();
    $("#pane-settings").hide();
    }
});

$("#link-settings").on("click", function () {
    console.log("[INFO] Showing settings");
    $("#pane-settings").show();
    $("#pane-overview").hide();
    }
});

Answer 2

根据 Boostrap 文档，您的脚本未按正确顺序包含。 http://getbootstrap.com/docs/4.0/getting-started/download/#bootstrap-cdn

代码笔： https://codepen.io/hunzaboy/pen/zEBPEw

/*
 * Base structure
 */


/* Move down content because we have a fixed navbar that is 3.5rem tall */

body {
  padding-top: 3.5rem;
}


/*
 * Typography
 */

h1 {
  margin-bottom: 20px;
  padding-bottom: 9px;
  border-bottom: 1px solid #eee;
}


/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}


/* Sidebar navigation */

.sidebar {
  padding-left: 0;
  padding-right: 0;
}

.sidebar .nav {
  margin-bottom: 20px;
}

.sidebar .nav-item {
  width: 100%;
}

.sidebar .nav-item+.nav-item {
  margin-left: 0;
}

.sidebar .nav-link {
  border-radius: 0;
}


/*
 * Dashboard
 */


/* Placeholders */

.placeholders {
  padding-bottom: 3rem;
}

.placeholder img {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<!-- First jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--Then Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>

<!-- Then Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Dashboard</a>
  <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

  <!-- Navbar -->
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="nav navbar-nav mr-auto">
      <li role="presentation" class="active nav-item">
        <a class="nav-link" data-toggle="tab" aria-controls="tab-overview" href="#tab-overview">Übersicht</a>
      </li>
      <li role="presentation" class="nav-item">
        <a class="nav-link" data-toggle="tab" aria-controls="tab-overview" href="#tab-settings">Einstellungen</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid">
  <div class="tab-content">
    <div class="tab-pane active" id="tab-overview">
      <div class="row">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
          <ul class="nav nav-pills flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">Data 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Data 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Data 3</a>
            </li>
          </ul>
        </nav>

        <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
          <h1>Dashboard</h1>

          <section class="row text-center placeholders">
            <div class="col-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <div class="text-muted">Something else</div>
            </div>
            <div class="col-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
          </section>
        </main>
      </div>
    </div>

    <div class="tab-pane" id="tab-settings">
      <div class="row">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
          <ul class="nav nav-pills flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">Settings 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Settings 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Settings 3</a>
            </li>
          </ul>
        </nav>

        <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
          <h1>Einstellungen</h1>

          <section class="row text-center placeholders">
            <div class="col-12 col-sm-12 placeholder">
              <h4>Label</h4>
              <div class="text-muted">Something else</div>
            </div>
          </section>
        </main>
      </div>
    </div>
  </div>
</div>