Question

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

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

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

我的版本说明链接位于页面底部的页脚中。我该怎么办，链接的行为就像它仍然是标签内容的一部分一样？

我希望即使不在导航栏包装器中，href上的data-toggle="tab"仍然可以解决问题，但是当点击它时，控制台会说Uncaught TypeError: Cannot read property 'nodeName' of undefined。没有数据切换，就没有任何事情发生。

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

Answer 1

问题是Bootstrap 4 JS尝试在标签的父级（应该是导航.active）中找到<div>标签，它无法找到链接在代码的另一个地方。这意味着没有针对您的问题的非JS解决方案。

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

我们在其他标签列表中有“展示位置”标签，但其标识为imprint-tab，另外一个类d-none（隐藏）
您要切换标签的链接的标识为toggle-imprint，我们的简短jQuery代码段会找到
jQuery将运行$('#imprint-tab').tab('show')函数（.tab('show') docs here）

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

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

1 个答案: