en utilisant jquery pour changer la visibilité de divs avec du contenu imbriqué, onclick

Question

J'ai une liste de liens. Quand l'un des liens est cliqué, je voudrais changer la visibilité de la div associée. Mon html ressemble à la suivante:

<div id="tab"> 
<ul> 
<li id="tab1" class="active"><a href="#">Link 1</a></li> 
<li id="tab2"><a href="#">Link 2</a></li> 
<li id="tab3"><a href="#">Link 3</a></li> 
<li id="tab4"><a href="#">Link 4</a></li> 
</ul> 
</div> 

<div id="content1"><div class="nestedDiv">Content Here</div></div> 
<div id="content2"><div class="nestedDiv">Content Here</div></div> 
<div id="content3"><div class="nestedDiv">Content Here</div></div> 
<div id="content4"><div class="nestedDiv">Content Here</div></div> 

J'ai essayé d'utiliser des exemples que je trouve ici: How do you swap DIVs on mouseover? (jquery?) mais il échoue à cause des divs imbriqués.

Des idées sur la façon dont je peux faire en sorte que tout le contenu d'un div donné, y compris d'autres divs, soit affiché en cliquant? Je voudrais aussi garder le premier div dans un état actif quand la page est ouverte pour la première fois ... changer l'apparence active du li qui est sélectionné ... mais je n'ai pas encore essayé d'y remédier.

Toute contribution est appréciée. Merci!

Merci!

Answer 1

Ajouter une class = « contenu » sur chaque contenu div

<style type="text/css"> 
.content 
{ 
    display: none; 
} 
</style> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $("#tab a").click(function() { 

     //reset 
     $(".content").hide(); 
     $("#tab .active").removeClass("active"); 

     //act 
     $(this).addClass("active") 
     var id = $(this).closest("li").attr("id").replace("tab",""); 
     $("#content" + id).show(); 
    }); 

}); 
</script>