0

Tenho a seguinte situação

<div class="container">
    <div class="row">                               
        <div class="col-md-1">
        </div>
        <div class="col-md-10">         
        </div>
    </div>

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#1">1</a></li>
        <li><a data-toggle="tab" href="#2">2</a></li>
        <li><a data-toggle="tab" href="#3">3</a></li>               
    </ul>

    <div class="tab-content">
        <div id="1" class="tab-pane tab tab-label fade in active">
            <button>1</button>
        </div>

        <div id="2" class="tab-pane fade">
            <button>2</button>    
        </div>          

        <div id="3" class="tab-pane fade">
            <button>3</button>
        </div>  
    </div>
</div>

<div class="row">
    <center><button name="qual_tab">Qual TAB esta selecionada</button></center>
</div>

Gostaria de apertar o botão "QUAL_TAB" e saber qual TAB esta ativa.
Não faço a mínima ideia de como proceder.

Colocar no on click do botão algo do HTML??? Colocar no on click do botão algo do javascript??? Ou outro procedimento que não vejo no momento??

2 Respostas 2

3

Utilize jquery para isso(Mas também pode ser feito com javascript puro), adicione o jquery na pagina:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="container">
    <div class="row">                               
        <div class="col-md-1">
        </div>
        <div class="col-md-10">         
        </div>
    </div>

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#1">1</a></li>
        <li><a data-toggle="tab" href="#2">2</a></li>
        <li><a data-toggle="tab" href="#3">3</a></li>               
    </ul>

    <div class="tab-content">
        <div id="1" class="tab-pane tab tab-label fade in active">
            <button>1</button>
        </div>

        <div id="2" class="tab-pane fade">
            <button>2</button>    
        </div>          

        <div id="3" class="tab-pane fade">
            <button>3</button>
        </div>  
    </div>
</div>

<div class="row">
    <center><button id="qual_tab" name="qual_tab">Qual TAB esta selecionada</button></center>
</div>

Repare que adicionei o id 'qual_tab' no botão, então através do evento clique ele busca a div que esta com a class active, pega o seu id e mostra em um alert.

<script>
$(function(){
    $('#qual_tab').click(function(){
    var tab = $('.tab-content .active').attr('id');
    alert(tab);
  });
});
//Pegando o indice
$(".tab-content div").each(function( index ) {
    if($( this ).attr('class').indexOf('active') != -1){
    alert("Indice: " + index);
  }
});
</script>
11
  • valeu mesmo.. PERFEITO :) Voto mas que merecido :). Uma questão agora. Se eu tiver mais de um grupo de tab-content?? como devo referenciar para pegar as tabs de um ou de outro?? Abraços :) 19/09/2017 às 20:07
  • Pra que jQuery? JS puro dá conta e fica até mais legível.
    – Jéf Bueno
    19/09/2017 às 20:12
  • Eu acho mais fácil utilizar jquery @LINQ, mas isso é questão de opinião. 19/09/2017 às 20:15
  • @Wictor Chaves Uma outra questão.. qual seria o attr para pegar o indice?? Sabe onde consigo ler alguma referencia sobre isso (nav nav-tab)?? :) 19/09/2017 às 20:18
  • @LINQ Como seria com JS?? Poderia dar uma luz??:) Sempre é bom saber mais :) 19/09/2017 às 20:19
3

Solução sem jQuery — o que acaba sendo inútil já que o AP usa bootstrap e o mesmo precisa do jQuery para funcionar. Estou postando a pedido do AP mesmo.

document.getElementById('qual_tab').addEventListener('click', function() {
  var tab = document.querySelector('.tab-content .active');
  console.log(`Id da tab selecionada: ${tab.id}`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">                               
        <div class="col-md-1">
        </div>
        <div class="col-md-10">         
        </div>
    </div>

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#1">1</a></li>
        <li><a data-toggle="tab" href="#2">2</a></li>
        <li><a data-toggle="tab" href="#3">3</a></li>               
    </ul>

    <div class="tab-content">
        <div id="1" class="tab-pane tab tab-label fade in active">
            <button>1</button>
        </div>

        <div id="2" class="tab-pane fade">
            <button>2</button>    
        </div>          

        <div id="3" class="tab-pane fade">
            <button>3</button>
        </div>  
    </div>
</div>

<div class="row">
    <center><button id="qual_tab" name="qual_tab">Qual TAB esta selecionada?</button></center>
</div>

3
  • Muito maneiro mesmo.. Com sua resposta pude aprender tambem como declarar os scripts para poder colocar no pt.stackoverflow.com/questions/ask# , Agora a mesma duvida que perguntei para o Wictor Chaves: Qual o atributo para retornar o indice ta tab?? ${tab.???} . E se a página contiver mais de um tab-content??? como proceder?? :) mais uma vez.. Obrigado :) 19/09/2017 às 20:38
  • @RicardoM.Souza As Tabs não têm índices, você teria que controlar manualmente ou capturar o índice da li dentro da lista (ul). Se a página tiver mais de um tab-content é só você diferenciá-los por uma classe ou id e depois trocar o selector dentro de querySelector. Por exemplo, querySelector('.tab1 .tab-content .active')' e assim por diante.
    – Jéf Bueno
    19/09/2017 às 20:40
  • Valeu mesmo.. Obrigado pela atenção :) abraços 19/09/2017 às 20:46

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 .