Help with Jquery appear div

Asked

Viewed 116 times

1

Good afternoon ,I need help regarding jquery , below 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 to make appear only the div that is referenced in the menu when I click ?

jquery

  • These href will all be #1?

  • use jquery onClick event

  • Sorry , more do not know how to do , someone could help me , Sergio each hfref and referring to an id , just correct

  • @Gabrielrodrigues in the question you mentioned the user asks the answer in pure javascript. Here would be using jQuery.

  • @Joaopaulo no, the answer voted as correct by Diego Vieira has the resolution for both javascript and jQuery.

  • 1

    @Gabrielrodrigues also this issue has its own context. It is not enough to know how to show and hide a div.

Show 1 more comment

4 answers

3


Try it like this:

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

  • Thanks John , Saved my day , thanks even there man

  • +1 - if you put that $(".teste") cached out of function gets even better :)

2

Do so:

<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 on jsfiddle jsfiddle.

  • $(div).show().siblings('.teste').hide(); ++

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: https://jsfiddle.net/u6ykLt8u/

And a jQuery version, with and without ID access:

Without having even 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);
    });
});

Having ties to the Ids:

var $testes = $('.teste');
$('ul a').click(function(e) {
    $testes.hide();
    $($(this).attr('href')).show();
});
  • 1

    Very good your solution in pure javascript.

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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.