I have the following situation:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#segunda_tab" ><?php echo $array_dia_da_semana_s[0] ?></a></li>
<li><a data-toggle="tab" href="#terca_tab" ><?php echo $array_dia_da_semana_s[1] ?></a></li>
</ul>
<div class="tab-content">
<div id="segunda_tab" class="tab-pane tab tab-label fade in active">
<?php
$id_linha_tabs = 1;
echo("<font size='5' style='font-weight:bold;'>" . $array_dia[0] . "</font>");
$data_string = $array_dia[0];
$dia_da_semana = 0;
$id_da_tabela = 0;
include('consulta_01_dds.php');
?>
</div>
<div id="terca_tab" class="tab-pane fade">
<?php
echo("<font size='5' style='font-weight:bold;'>" . $array_dia[1] . "</font>");
$data_string = $array_dia[1];
$dia_da_semana = 1;
$id_da_tabela = 1;
include('consulta_01_dds.php');
?>
</div>
</div>
In the file query_01_dds.php I have the following code:
<br>
<table>
<td>
<tr>
<?php echo($dia_da_semana)?>
<button class="button1" id="<?php echo($dia_da_semana)?>"><?php echo($dia_da_semana)?>
</tr>
</td>
</table>
<br>
<script>
$(function()
{
$('.button1').click(function()
{
bb = $(this);
$(".tab-content div").each(function( index )
{
if($(this).attr('class').indexOf('active') != -1)
{
alert(" B Indice3: " + index+ ' value..: '+ $(bb).val()+ ' - id '+ $(bb).attr('id'));
}
});
});
});
</script>
At first everything works as it should. The tabs appear, each tab content in its respective place, however when I press the button of class button1 the click returns the alert with the information I asked for correctly, the problem is that it returns me as many times as the tabs I place. In this case the alert appears 2 times. Home
Example .. If I add another LI with href="#quarta_feira"
and its respective div id="quarta_feira"
then the click will cause the alert to appear 3 times ..
Is the logic wrong? Is not that how you use nav-tabs and tab-pane?
Thanks in advance for your attention.