Bootstrap 4 - 使用页脚链接显示选项卡内容答案

【问题标题】：Bootstrap 4 - Use an footer link to show a tab contentBootstrap 4 - 使用页脚链接显示选项卡内容
【发布时间】：2018-08-19 11:48:54
【问题描述】：

我使用 Bootstrap 4 中的导航工具，有一个带有 4 个选项卡的选项卡导航，每个选项卡都显示其内容。这一切都很好。

现在我决定将最后一个标签（印记）放在页脚中。但是功能应该和以前一样：我想单击页脚中的链接并显示选项卡内容。此外，当前页面的活动链接将消失（就像在正常更改选项卡时一样）。

我在fiddle做了一个简单的演示：https://jsfiddle.net/7gwkcsr4/30/

我的印记链接位于页面底部的页脚中。我该怎么做，链接的行为就像它仍然是选项卡内容的一部分一样？

我希望a href 上的data-toggle="tab" 即使不在导航栏包装器中也能起到作用，但是当点击它时，控制台会显示Uncaught TypeError: Cannot read property 'nodeName' of undefined。没有数据切换，什么都不会发生。

可以做些什么来完成这项工作？我必须使用in this SO question using BS3 所示的 JS/jQ，还是只能使用 html 来完成？

【问题讨论】：

你检查过控制台吗？
编辑问题

标签： bootstrap-4 navbar

【解决方案1】：

问题在于，Bootstrap 4 JS 试图在选项卡的父级（应该是导航 <div>）中找到 .active 选项卡，因为链接位于其他位置代码。这意味着您的问题没有非 JS 解决方案。

但是，我创建了一个非常干净 (JS) 的解决方案，应该适合您：

我们在其他选项卡列表中有印记选项卡，但它有一个 id imprint-tab 和一个额外的类 d-none（使其隐藏）
您要切换选项卡的链接的 ID 为 toggle-imprint，我们的简短 jQuery sn-p 将找到该链接
jQuery 将运行$('#imprint-tab').tab('show') 函数（.tab('show') 文档here）

基本上当我们点击页脚中的链接时，#imprint-tab 将被切换（取消选择最后一个选项卡）并显示选项卡内容。

$("#toggle-imprint").click(function(){
  $('#imprint-tab').tab('show');
});

html {
  height: 100%;
}
body {
  padding: 20px;
  position: relative; 
  min-height: 100%
}
footer {
  bottom: 20px;
  width: 100%;
  position: fixed;
}

.nav-link {
    color: black;
}
.nav-link.active {
    color: red;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/combine/npm/jquery@3.3.1/dist/jquery.slim.min.js,npm/bootstrap@4.0.0/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-sm">
  <div class="nav navbar-nav">
    <a href="#nav-home" class="nav-item nav-link active" data-toggle="tab">Home</a>
    <a href="#nav-content1" class="nav-item nav-link" data-toggle="tab">Content1</a>
    <a href="#nav-content2" class="nav-item nav-link" data-toggle="tab">Content2</a>
    <!-- Not anymore, moved to footer now! -->
    <a id="imprint-tab" href="#nav-imprint" class="nav-item nav-link d-none" data-toggle="tab">Imprint</a>
  </div>
</nav>

<div class="tab-content" id="nav-tabContent">
  <div id="nav-home" class="tab-pane fade show active">
    Hello HOME
  </div>
  <div id="nav-content1" class="tab-pane fade">
    Hello Content 1
  </div>
  <div id="nav-content2" class="tab-pane fade">
    Hello Content 2
  </div>
  <div id="nav-imprint" class="tab-pane fade">
    Hello Imprint
  </div>
</div>

<footer>
  <a id="toggle-imprint" href="#">Imprint</a>
</footer>

我也在示例中使用 Bootstrap 4 stable，但这在您使用的版本中也适用。确保尽可能升级！

【讨论】：