How to know which tab is selected

Asked

Viewed 1,560 times

0

I have the following situation

<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>

I would like to press the button "QUAL_TAB" and know which TAB is active.
I have no idea how to proceed.

Put something HTML on the button?? Put something javascript on the on-click button?? Or another procedure I don’t see at the moment??

php html twitter-bootstrap

2 answers

3


Use jquery for this(But it can also be done with pure javascript), add jquery to the page:

<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>

Note that I added the id 'qual_tab' on the button, so through the event click it looks for the div that has the active class, picks up your id and shows in an 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>

  • thanks. PERFECT :) Vote but deserved :). A question now. If I have more than one tab-content group?? how should I reference to pick up tabs from one or the other?? Hugs :)

  • What for jQuery? Pure JS gives account and is even more readable.

  • I find it easier to use jquery @LINQ, but this is a matter of opinion.

  • @Wictor Chaves Another question.. what would be the attr to catch the Indice?? Do you know where I can read some reference about it (Nav Nav-tab)?? :)

  • @LINQ How would it be with JS?? Could I give a light??: ) Always good to know more :)

  • @Souza Posso, 1 minute that I show

  • @Okay, I created an answer and left an observation in it, let me know when you see.

  • @Wictorchaves Yes, it’s a matter of opinion, but the way you put it in the question seems the only viable way to do it is by using jQuery. It was just a comment on this very thing, it is no criticism for the use of the library. Even because bootstrap requires jQuery then...

  • @Souza put Ricardom.Souza taking the index

  • @LINQ put an observation, thanks for the tip.

  • @Wictor Keys Thank you so much for your attention. : ) Hugs :)

Show 6 more comments

3

Solution without jQuery - which turns out to be useless since AP uses bootstrap and the same needs jQuery to work. I am posting at the request of the same AP.

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>

  • This is really cool.. With your answer I could also learn how to declare the scripts to be able to put in https://answall.com/questions/ask# , Now the same doubt I asked for Wictor Chaves: What is the attribute to return the Dice ta tab? ${tab.??? } . What if the page contains more than one tab-content??? how to proceed?? ) once again.. Thank you. :)

  • @Souza The Tabs have no indexes, you would have to manually control or capture the index of li on the list (ul). If the page has more than one tab-content is just you differentiate them by a class or id and then swap the selector within querySelector. For example, querySelector('.tab1 .tab-content .active')' and so on.

  • Thanks so much. Thanks for your attention :) Hugs

Browser other questions tagged php html twitter-bootstrap

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