Help with Jquery appear div [duplicate]

1

Good afternoon, I need help with jquery, here's an example:

<ul>
	<li><a href="#1">Conteudo1</a></li>
	<li><a href="#2">Conteudo2</a></li>
	<li><a href="#3">Conteudo3</a></li>

</ul>


<div class="teste" id="1">
	<p>Teste 1</p>
</div>

<div class="teste" id="2">
	<p>Teste 2</p>
</div>

<div class="teste" id="3">
	<p>Teste 3</p>
</div>


$(document).ready(function(){
	$('.teste').hide();

	
});

How do I make only the div that is referenced in the menu appear when I click?

    
asked by anonymous 16.05.2016 / 18:59

4 answers

3

Try this:

$(document).ready(function(){
    $("li a").click(function(){
        var id = $(this).attr("href");
        $(".teste").hide();
        $(id).show();
    });
});
    
16.05.2016 / 19:36
2

Do this:

<ul>
  <li><a href="#1">Conteudo1</a></li>
  <li><a href="#2">Conteudo2</a></li>
  <li><a href="#3">Conteudo3</a></li>
</ul>

<div class="teste" id="1">
  <p>Teste 1</p>
</div>

<div class="teste" id="2">
  <p>Teste 2</p>
</div>

<div class="teste" id="3">
  <p>Teste 3</p>
</div>


$(document).ready(function(){
    $('ul li a').click(function() {
       var div = $(this).attr("href");
       $(div).show().siblings('.teste').hide();
    })   	
});

See an example working in jsfiddle jsfiddle .

    
16.05.2016 / 19:36
1

I know you already have an accepted answer.

But here is a solution with native JavaScript:

function toggle(els, index) {
    return function(e) {
        e.preventDefault();
        for (var i = 0; i < els.length; i++) {
            els[i].style.display = i == index ? 'block' : 'none';
        }
    }
}

var lis = document.querySelectorAll('ul li a');
var testes = document.querySelectorAll('.teste');
for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', toggle(testes, i));
}

jsFiddle: link

And a jQuery version, with and without access to the ID:

Without being aware of the ID:

var $testes = $('.teste');
$('ul a').click(function(e) {
    var attr = $(this).attr('href').slice(1);
    $testes.each(function() {
        $(this).toggle(this.id == attr);
    });
});

Considering the IDs:

var $testes = $('.teste');
$('ul a').click(function(e) {
    $testes.hide();
    $($(this).attr('href')).show();
});
    
16.05.2016 / 20:19
0
<ul>
   <li><a href="#div1" id="1" class="link">Conteudo1</a></li>
   <li><a href="#div2" id="2" class="link">Conteudo2</a></li>
   <li><a href="#div3" id="3" class="link">Conteudo3</a></li>
</ul>


<div class="teste" id="div1">
    <p>Teste 1</p>
</div>

<div class="teste" id="div2">
    <p>Teste 2</p>
</div>

<div class="teste" id="div3">
    <p>Teste 3</p>
</div>

<script>
$(document).ready(function(){
    //esconde todas as divs
    $('.teste').hide();

    //quando elemento com a class "link" for clicado
    $('.link').click(function(){
         //esconde todas as divs
         $('.teste').hide();
         //pega o id correspondente a div que quer mostrar
         var id = $(this).attr("id");
         //mostra a div correta
         $("#div"+id).show();
    });
});
</script>
    
16.05.2016 / 19:52