0

Im using the navigation tools from Bootstrap 4, having a tab navigation with 4 tabs, each showing its content. All this works fine.

Now I decided to place the last tab, the imprint, in a footer. But the functionality shall remain the same as before: I want to click on the link in the footer and display the tab content. Furthermore, the active link from the current page shall be gone (like when normally changing a tab).

I made a simple demonstration in fiddle: https://jsfiddle.net/7gwkcsr4/30/

My imprint link is in the footer at the bottom of the page. What do I have to do, that the link behaves just like it was still a part of the tab content?

I hoped that the data-toggle="tab" on the a href would still do the trick even if not being in the navbar wrapper, but when clicking on it, console says Uncaught TypeError: Cannot read property 'nodeName' of undefined. Without the data-toggle, just nothing happens.

What can be done to make this work? Do I have to use JS/jQ like shown in this SO question using BS3, or can it be done using only html?

BAERUS
  • 4,009
  • 3
  • 24
  • 39

1 Answers1

0

The problem is that the Bootstrap 4 JS tries to find the .active tab in the parent (should be the nav <div>) of the tabs, which it can't find as the link is in a other place in the code. This means that there isn't a non-JS solution to your problem.

However, I've created a pretty clean (JS) solution that should work for you:

  • We have the imprint tab in the list of other tabs, but it has a id imprint-tab and a extra class d-none (makes it hidden)

  • The link you want to toggle the tab with has the id toggle-imprint which our short jQuery snippet will find

  • jQuery will run the $('#imprint-tab').tab('show') function (.tab('show') docs here)

Basically when we click on the link in the footer, the #imprint-tab will be toggled (deselecting the last tab) and the tab content will be shown.

$("#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>

I'm also using Bootstrap 4 stable in the example, but this works aswell in the version you are using. Make sure to upgrade when possible!

Klooven
  • 3,858
  • 1
  • 23
  • 41