I cannot redirect to a new tab within the same url

Question

I’m a beginner in PHP and I’m struggling to find a solution to my problem. I have a array main with 7 arrays, with 2 fields each, which are tabs on one of the urls of the site.

I need that when clicking the 'next step' button be redirected to the second tab, but I could not even do json or by javascript. Someone can help me?

Below is part of the code.

$topicos = array(
    array(
        "id"    => 1,
        "label" => "Formação"
    ),
    array(
        "id"    => 2,
        "label" => "Cursos Extra Curriculares"
    ),
    array(
        "id"    => 3,
        "label" => "Experiências Profissionais"
    ),
    array(
        "id"    => 4,
        "label" => "Experiências Internacionais"
    ),
    array(
        "id"    => 5,
        "label" => "Idiomas"
    ),
    array(
        "id"    => 6,
        "label" => "Conhecimentos Técnicos Específicos"
    ),
    array(
        "id"    => 7,
        "label" => "Outras Informações"
    )
); 

<form action="<?= $path ?>banco_de_talentos_add_2" id="segundo_formulario" method="post" enctype="multipart/form-data">
<input type="hidden" id="proxima" name="proxima" value="0"/>

<div class="row-fluid ">
    <div class="span12">
        <div class="dropdown_protect"></div>
        <div class="tab-header">
            <ul id="tab-content" class="nav nav-tabs classe_a_ocultar_em_smartphone classe_a_ocultar_em_tablet">
                <?php
                foreach ($topicos as $t):
                    if($t["id"] == 1):
                        echo "<li class='active'><a href='#tab" . $t["id"] . "'>" . $t["label"] . "</a></li>";
                    else:
                        echo "<li><a id='ir_para_questionario' href='#tab" . $t["id"] . "'>" . $t["label"] . "</a></li>";
                    endif;
                endforeach;
                ?>
            </ul>
        </div><!--tab-header-->

        <div class="tab-content">
            <?php foreach($topicos as $t):
                if($t["id"] == 1):
                    echo '<div id="tab' . $t["id"] . '" class="tab-pane active">';
                else:
                    echo '<div id="tab' . $t["id"] . '" class="tab-pane">';
                endif;

                include "banco_de_talentos_formulario_" . $t["id"] . ".php";

                echo '</div>';
            endforeach; ?>
        </div>
    </div>
</div>

<div style="width:100%;text-align:center">
    <input type="submit" value="Salvar" class="btn"/>
    <input type="button" id="btn_anterior" value="Etapa Anterior" class="btn" onClick="document.getElementById('proxima').value = 2; document.getElementById('segundo_formulario').submit()"/>
    <input type="button" id="btn_proxima" value="Próxima Etapa" class="btn" onClick="document.getElementById('proxima').value = 1; document.getElementById('segundo_formulario').submit()"/>
   <!-- <input type=button value="Proxima aba" class="btn" id="new_tab" onkeydown="tab()"> -->
</div>

Answer 1

Take a look at this Jsfiddle.

https://jsfiddle.net/o47v8La9/

I made a flap system that you can understand.

HTML

<div id="tabs">
    <span class="tab" id="#php"> PHP </span>
    <span class="tab" id="#html"> HTML </span>
    <span class="tab" id="#js"> JS </span>
</div>

<div id="php" class="main"> Teste Aba PHP </div>
<div id="html" class="main"> Teste Aba HTML </div>
<div id="js" class="main"> Teste Aba JS </div>

Note that in the above code I created 3 tabs. Each of them has an ID.

And then underneath I created 3 Divs with the same tab ID, but without the #.

Then on JS with jQuery...

$('.tab').click(function(){
    $('.main').hide();

    var tabSelecionada = $(this).prop('id');

    $(tabSelecionada).show();
});

The first line is the function of clicking on the tab element, in the Links so to speak. When I click on one of them, the function hides all tabs (in the second line) and then shows only that it was selected (in the fifth line).

Now just implement in your code if it serves.