Tab does not come open

Asked

Viewed 62 times

2

I have 4 tabs,

I would like to know how to make the first tab already open... Follow the code below:

<ul id="myTabs" class="nav nav-tabs">
    <li><a data-toggle="tab" href="#menu1">Configurar Administrador</a></li>
    <li><a data-toggle="tab" href="#menu2">Configurar Perfil</a></li>
    <li><a data-toggle="tab" href="#menu3">Alterar Senha/ Email</a></li>
    <li><a data-toggle="tab" href="#menu4">Configurar Usuário Externo</a></li>
</ul>
twitter-bootstrap
  • 1

    It’s from the bootstrap ?

  • I’m sorry, it’s bootstrap

  • Just add the class active to the list item you want to be active.

2 answers

4

It’s quite simple, what you need to do is add the active class in your li:

Example:

<ul id="myTabs" class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#menu1">Configurar Administrador</a></li>
    <li><a data-toggle="tab" href="#menu2">Configurar Perfil</a></li>
    <li><a data-toggle="tab" href="#menu3">Alterar Senha/ Email</a></li>
    <li><a data-toggle="tab" href="#menu4">Configurar Usuário Externo</a></li>
</ul>

1

I believe you need to add the active class in the tab you want to come active. You can put fixed on the code class="active" or load the page.

$(document).ready(function(){

  //Ache o primeiro li tab e adicionar classe active.
  $($('#myTabs').find('li').get(0)).addClass('active');

});

See which of the two paths is best for you.

  • 1

    No need for javascript. since after clicking the bootstrap.js itself will put the active class in the selected item.

  • This js is in the load, as I said, has to find the best way for you. ;)

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.