2

Estou fazendo uma tela que possui algumas tabs, não possuo muita familiaridade com isso, por isso estou fazendo uma de exemplo:

<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">teste</div>
        <div role="tabpanel" class="tab-pane" id="profile">teste</div>
        <div role="tabpanel" class="tab-pane" id="messages">teste</div>
        <div role="tabpanel" class="tab-pane" id="settings">teste</div>
    </div>

</div>

Mas acontece que o projeto todo esta feito em angular, e usamos rotas para acessar as paginas,ok... a tela com as tabs abre normalmente tudo certo, porém ao clicar em uma tab para mudar o seu conteúdo, o site volta para a pagina inicial, alguém sabe como posso arrumar isso?

2
  • 1
    Essas tabs são do bootstrap? Se sim, certifique de que você incluiu no seu arquivo html o bootstrap.js 10/05/2017 às 14:26
  • Ja consegui, obrigado, ao invés de href usei data-target.
    – Brayan
    10/05/2017 às 14:30

2 Respostas 2

1

Como nosso amigo Brayan falou no post dele, é necessário trocar o href="#home" para data-target="#home".

=> data-target reconhece pelo ID passado para tab, por exemplo:

// Tab

<div role="tabpanel" class="tab-pane active" id="home">teste</div>

http://getbootstrap.com/javascript/#tabs-methods

0

Depois de ir testando aqui cheguei a uma solução, que foi a penas tirar os href e colocar data-target.

 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

Troquei por esse:

 <li role="presentation" class="active"><a data-target="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

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 .