[Javascript] Besoin d'aide pour un JS

[Mickey-3d]

Salut à tous,

 

Je suis entrain de faire un site web mais j’ai un petit souci... Sur une page de service j'ai plusieurs "services" chaque rubrique est placé dans une "div" seulement je ne souhaite pas tout afficher d'un coup, ca me fait une page trop longue, donc je souhaite ajouter une petite navigation par onglet. Jusque là pas de problème, j ai adapté un script qui me permet d'avoir une barre d’onglet avec chacun de mes "services" et en dessous uniquement le "service sélectionné" qui s affiche.

 

Mon problème est le suivant : j’aimerai ajouter un fondu pour faire apparaitre la "div", ayant cherché je me suis tourné vers Jquery qui propose l'effet "fade in" qui me conviendrai très bien. Donc pas de soucis, j’ai téléchargé Jquery et le fait charger sur ma page. Par contre je ne sais pas comment ajouter le "fade in" dans le code....

 

Si quelqu’un peut m’aider à mieux comprendre comment ca fonctionne?

<script type="text/javascript">

					function change_onglet(name)
	{
	document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
	 document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
	document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
	document.getElementById('contenu_onglet_'+name).style.display = ("block");
	anc_onglet = name;
	}
</script>



<div class="systeme_onglets">

<div class="onglets">
		  <ul>
				   <li class="onglet_0 onglet" id="onglet_1" onclick="java script:change_onglet('1');"> Titre 1</li>
							<li class="onglet_0 onglet" id="onglet_2" onclick="java script:change_onglet('2');"> Titre 2</li>
				   <li class="onglet_0 onglet" id=" Titre 3" onclick="java script:change_onglet('3');">Tirtre 3</li>
		  </ul>
</div>

<div class="contenu_onglets">	
		 <div class="contenu_onglet" id="contenu_onglet_1">
				<h1>Titre 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		 </div>

		 <div class="contenu_onglet" id="contenu_onglet_2">
			   <h1> Titre 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		  </div>

		<div class="contenu_onglet" id="contenu_onglet_3">
			   <h1> Titre 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>

	   </div>

</div>


<script type="text/javascript">
										  var anc_onglet = '1';
										  change_onglet(anc_onglet);
</script>

Modifié le 16 septembre 2009 par Mickey-3d