I can not redirect to a new one tab within the same url

2

I'm a beginner in PHP and I'm having a hard time finding a solution to my problem. I have a main array with 7 arrays , with 2 fields each, which are tabs in one of the urls of the site.

I need to click on the 'next step' button to be redirected to the second tab, but I could not do either json or javascript. Can anyone 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>
    
asked by anonymous 16.07.2015 / 13:21

1 answer

1

Take a look at this JSFiddle.

link

I made a system of tabs 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 code above I created 3 tabs. Each one has an ID.

And then below I created 3 divs with the same tab ID, but without # .

Then in JS with jQuery ...

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

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

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

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

Now just implement it in your code, if it suits.

    
16.07.2015 / 13:37