2

Como fazer para a navbar do Bootstrap 4.1 variar entre os conteúdos quando clicado neles, criei a nav seguindo o exemplo do site.

Para navbar abrir os itens dela precisa adicionar ação com js nela? Como faço?

Tentei assim:

$('#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>
5

1 Resposta 1

1

Não sei se entendi direito, mas se vc que apenas um Sistema de TABs basta vc utilizar o componente que está na documentação. Repare que não é preciso JS adicional, mas é preciso que vc indexe na sua página todos os arquivos .JS que o componente precisa e o framework necessita. São eles o jQuery, o Popper e o Bootstrap.js

Repare na ordem que os arquivos .JS estão. Isso é essencial para o correto funcionamento do componente, se vc trocar essa ordem não vai funcionar.

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

2
  • Deu mais ou menos, quando eu clico entre os 2, o selecionado muda só não o conteúdo. Inicialmente mostra o 123, porém quando eu mudo para o Profile continua no 123. Commented 13/09/2018 às 17:26
  • @JoãoMiguel se aqui funcionou a única explicação é que vc deve ter feito algo ai que interferiu no funcionamento do componente. Verifique se vc removeu esse Java Script desnecessário, ou verifique se vc colocou alguma classe CSS que esteja interferindo nesse conteúdo das tabs, tipo displays ou positions no conteúdo das abas...
    – hugocsl
    Commented 13/09/2018 às 17:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .