2

Estou tentando adaptar este script, que achei nesta excelente resposta do SOen, para que quando houver um click no link, as divs irem se alternando.

Na página existem várias divs, e cada uma irá aparecer quando acontecer o click no link respectivo, e esta div aparecerá no lugar da que estava antes (que irá desaparecer).

Exatamente como está no script abaixo, exceto pelo fato de que a div onde está o primeiro link não desaparece quando a segunda aparece (fica acima). Preciso que ela desapareça quando a segunda div é chamada.

Já adaptei o HTML para o jeito que preciso, ou seja, para que o link que remete a cada div apareça na anterior, e assim sucessivamente (é para um formulário). Também mudei a função que chama a div (com um efeito de rapidez) .slideDown('fast')... É possível ver o exemplo verificável abaixo, clicando em "Executar trecho de código". Valeu desde já!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu_about">
    <a class="link" href="#about" data-link="first">
        &nbsp;&nbsp; Chama primeira div
    </a> &#8226;
    </div>
<div id="pages_about" class="textContainer_about">
    <div class="textWord_about" data-link="first">
        <p>Primeira div<br>
            <a class="link" href="#about" data-link="second">link para a segunda div</a></p>
    </div>
    <div class="textWord_about" data-link="second">
        <p>Segunda div<br>
            <a class="link" href="#about" data-link="third">link para a terceira div</a></p>
    </div>
    <div class="textWord_about" data-link="third">
        <p>Terceira div<br>
            <a class="link" href="#about" data-link="fourth">link para a quarta div</a></p>
    </div>
    <div class="textWord_about" data-link="fourth">
        <p>Quarta div<br>
        <a class="link" href="#about" data-link="fifth">link para a quinta div</a></p>
    </div>
    <div class="textWord_about" data-link="fifth">
        <p>Quinta div</p>

    </div>
</div>

<script type="text/javascript">
    $('.textWord_about').hide();
    $('.link').click(function() {
        $('.textWord_about').hide();
        $('.textWord_about[data-link=' + $(this).data('link') + ']').slideDown('fast')
    });
</script>

2 Respostas 2

1

Esse primeiro link também pode ser escondido se usares $('.textWord_about, #menu_about').hide();. No teu HTML essa div só tem ID, daí ter usado #menu_about.

jsFiddle: http://jsfiddle.net/s88j5nhx/

Nota: Na tua resposta acrescentaste uma classe a essa primeira div, eu usei a ID que já tinha, mas podias também usar a mesma classe para todos e fazer assim:

$('.textWord_about').not(':first').hide();

jsFIddle: http://jsfiddle.net/s88j5nhx/1/

1
  • 1
    Excelente! Com certeza vou utilizar desta segunda forma, muito mais elegante! Valeu mesmo!
    – gustavox
    Commented 27/05/2015 às 5:03
0

Também tens a opção de user este script:

$("#btn_grafico").hide();
$("#Div").click(function(){
    $("#a_links").toggle();
});
1
  • Bem vindo ao Stack Overflow. Poderia explicar com mais detalhes como esse código resolve o problema? Faça um tour e leia mais em Como responder.
    – gmsantos
    Commented 27/05/2015 às 12:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .