Bootstrap Tabs Do not Come Back

2

I made the tabs in the bootstrap but they go once more to each other after it has been clicked on each one it is not allowed to click again.

<div id="tabss" style="text-align: center;">
                  <li><a href="#bio" data-toggle="tab">Biografia</a></li>
                  <li><a href="#noticias" data-toggle="tab">Últimas Notícias</a></li>
                  <li><a href="#agendas" data-toggle="tab">Agendas</a></li>
                  <li><a href="#recados" data-toggle="tab">Recados</a></li>
            </div>

            <div class="tab-content">
              <div class="tab-pane active" id="bio">Bio</div>
              <div class="tab-pane" id="noticias">Noticias</div>
              <div class="tab-pane" id="agendas">Agendas</div>
              <div class="tab-pane" id="recados">Recados</div>
            </div>
    
asked by anonymous 01.07.2015 / 19:20

1 answer

4

<li> elements can not be entered within the <div> element. In the bootstrap semantics , they must be inserted within the <ul> tag.

The correct HTML would be:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<ul id="tabss" style="text-align: center;" class="nav nav-tabs">
  <li class="active"><a href="#bio" data-toggle="tab">Biografia</a>
  </li>
  <li><a href="#noticias" data-toggle="tab">Últimas Notícias</a>
  </li>
  <li><a href="#agendas" data-toggle="tab">Agendas</a>
  </li>
  <li><a href="#recados" data-toggle="tab">Recados</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="bio">Bio</div>
  <div class="tab-pane" id="noticias">Noticias</div>
  <div class="tab-pane" id="agendas">Agendas</div>
  <div class="tab-pane" id="recados">Recados</div>
</div>
    
01.07.2015 / 19:33