groups

Link to this snippet:


Download to Code Collector

language: Other
licence: Other

JS/JQUERY : Script pour gestion onglet en Jquery

options: send to code collector • view all pierre alexandre payet's snippets
//*** le code html
<div class="onglets">
	<div onclick="onglet(1, this);"> <a href="#1">TEXTE</a> </div>
	<div onclick="onglet(2, this);"> <a href="#2">TEXTE</a> </div>
	<div onclick="onglet(3, this);"> <a href="#3">TEXTE</a> </div>
	<div onclick="onglet(4, this);"> <a href="#4">TEXTE</a> </div>
	<div onclick="onglet(5, this);"> <a href="#5">TEXTE</a> </div>
</div>
					
					
<div class="textes" >
					
	<div id="1">
	
		Texte de cette onglet
	
	</div>

	<div id="2">
	
		Texte de cette onglet
	
	</div>

	<div id="3">
	
		Texte de cette onglet
	
	</div>
					

</div>

//**** le code js
    //la fonction
    <script>
	
		function onglet(id, obj){
			
			$(".textes > div").hide();
			$(".onglets > div").css("background", "url(img/onglet_off.jpg)");
			$(".onglets > div").css("color", "#93c36c");
			$("#"+id).show();
			$(obj).css("background", "url(img/onglet_on.jpg)");
			$(obj).css("color", "#fff");
			
		
		}

	//code pour javascript non intrusif

		$(".textes > div").hide(); //on masque les div en js
		$(".onglets > div > a").removeAttr("href"); //on desactive les ancres
		
	</script


//**** le css
.onglets div{

	float: left;
	width: 89px;
	height: 19px;
	background: url(../img/onglet_off.jpg);
	padding: 5px 0px 0px 0px;              //pour centrer verticalement le texte dans l'onglet
	text-align: center;
	color: #93c36c;
	font-weight: bold;
	cursor: pointer;
	
}

.onglets div a, a:visited, a:link, a:hover{

	color: #444;//couleur du texte dans les onglets
	
}

.textes{
	
	margin-top: 40px;
	clear: left;
	
}