Navbar does not change content

Navigation
2

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

For nav open the items do you need to add action with js in it? How do I?

I tried this way: 

$('#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>
    
asked by anonymous 13.09.2018 / 18:58

1 answer

1

I do not know if I understand correctly, but if you see that it is just a TAB System you only need to use the component that is in the documentation. Note that you do not need additional JS, but you need to index all the .JS files that the component needs and the framework you need. They are jQuery , Popper and Bootstrap.js

Notice the order that the .JS files 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><scriptsrc="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 -->
    
13.09.2018 / 19:12
Too slow table using Datatable Information goes beyond the place of display