Tabs bootstrap don’t come back

Question

I did the tabs in the bootstrap but they go once to others more after it was clicked on each she does not permission 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>

Answer 1

The elements <li> cannot be inserted inside the element <div>. In the bootstrap semantics, they must be inserted inside the tag <ul>.

The correct HTML would be:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="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>