引导 4 - 使用页脚链接显示选项卡内容

Question

我使用 Bootstrap 4 中的导航工具，有一个带有 4 个选项卡的选项卡导航，每个选项卡显示其内容。所有这些都工作正常。

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

我用小提琴做了一个简单的演示：https://jsfiddle.net/7gwkcsr4/30/

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

我希望 href 上的data-toggle="tab"即使不在导航栏包装器中也能解决问题，但是当单击它时，控制台说Uncaught TypeError: Cannot read property 'nodeName' of undefined.如果没有数据切换，什么都不会发生。

如何才能使这项工作发挥作用？我是否必须使用 BS3 来使用 JS/jQ，如本 SO 问题所示，还是只能使用 html 来完成？

Answer 1

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

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

• 我们在其他选项卡的列表中有 imprint 选项卡，但它有一个 idimprint-tab和一个额外的类d-none(使其隐藏)

• 您要用来切换选项卡的链接具有 idtoggle-imprint，我们的简短 jQuery 代码段将在其中找到该 id

• jQuery将运行$('#imprint-tab').tab('show')函数(此处.tab('show')文档)

基本上，当我们单击页脚中的链接时，#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 稳定版，但这在您使用的版本中也同样有效。确保尽可能升级！