Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

Estou tentando adaptar este script, que achei nesta excelente resposta do SOenresposta 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>

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>

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>

adicionou 44 caracteres ao conteúdo
Fonte Link
gustavox
  • 4mil
  • 10
  • 51
  • 98

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') + ']').fadeInslideDown({
            width: '200px'
        }, 300'fast');
    });
</script>

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). É 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') + ']').fadeIn({
            width: '200px'
        }, 300);
    });
</script>

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>

adicionou 261 caracteres ao conteúdo
Fonte Link
gustavox
  • 4mil
  • 10
  • 51
  • 98

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). É 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') + ']').fadeIn({
            width: '200px'
        }, 300);
    });
</script>

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.

<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') + ']').fadeIn({
            width: '200px'
        }, 300);
    });
</script>

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). É 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') + ']').fadeIn({
            width: '200px'
        }, 300);
    });
</script>

Fonte Link
gustavox
  • 4mil
  • 10
  • 51
  • 98
Carregando