Navbar does not change content

Question

How to do to the navbar of Bootstrap 4.1 vary between the contents when clicked on them, I created the nav following the example of the site.

To navbar open her items need to add action with js in it? How do I?

I tried so:

$('#nav-home').on('hide.bs.tab', function (e) {
            e.target // newly activated tab
            e.relatedTarget // previous active tab
          });
$('#nav-perfil').on('hide.bs.tab', function (e) {
            e.target // newly activated tab
            e.relatedTarget // previous active tab
          });

Navbars:

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
</div>

Answer 1

I don’t know if I understand this correctly, but if you only need a Tabs System you can use the component that is in the documentation. Note that you don’t need additional JS, but you need to index all the files on your page .JS that the component needs and the framework needs. They are the jQuery, the Popper and the Bootstrap.js

Note the order in which the files .JS are. This is essential for the correct functioning of the component, if you change this order will not work.

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
            aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
            aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
            aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">123</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">345</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">789</div>
</div>
    
<!-- ordem dos scripts deve ser essa -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <!-- qualquer outro arquivo .js deve vir apos estes acima -->