How to know which tab is selected

Use jquery for this (but 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><divclass="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 have added the id 'what_tab' on the button, then through the event click it it looks for the div that is with the class active, takes its id and shows it 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>

Solution without jQuery - which turns out to be useless since the AP uses bootstrap and it needs jQuery to work. I'm 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><linkrel="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><divclass="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>