28172 sujets

CSS et mise en forme, CSS3

Afficher un element selectionner

bonjour à tous et a toutes, je suis nouveau suis le forum et svp je voudrais beaucoup que vous m'aidiez.
En effet ma préoccupation actuelle est de faire afficher sur mon site après avec fait une sélection d’éléments.
je m'explique
<select>
<option>Menu</option>
<option>Accueil</option>
<option>Contact</option>
</select>
je voudrais après selection de Menu le faire afficher..
Bonjour krika, Voici un code qui pourra t'aider 


<!DOCTYPE HTML>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Alsa</title>
		
		<style>
			.masquer{
				display:none;
			}
			
			.afficher{
				display:block;
			}
			
			
		</style>
	</head>
	<body>
		<select id="select">
			<option value="M">Menu</option>
			<option value="A">Accueil</option>
			<option value="C">Contact</option>
		</select>
		
		<div id="menu" class="masquer">
			Menu
		</div>
		
		<div id="accueil" class="masquer">
			Accueil
		</div>
		
		<div id="contact" class="masquer">
			Contact
		</div>
		
		<!-- include jQuery library --> 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
		<script>			
			$("#select").change(function () {
				select = document.getElementById("select");
				choice = select.selectedIndex;
				valeur = select.options[choice].value;
				
				
				$(".afficher").removeClass("afficher").addClass("masquer"); 
				
				if(valeur == "M"){
					$("#menu").removeClass("masquer").addClass("afficher");
				}else if(valeur == "A"){
					$("#accueil").removeClass("masquer").addClass("afficher");
				}else if(valeur == "C"){
					$("#contact").removeClass("masquer").addClass("afficher");
				}
				
			});
		</script>
		
	<body>
</html>
Oui, enfin on pourra quand même se dispenser de JQuery !! (On pourrait même se passer de Javascript en utilisant la pseudo-classe :target)
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Alsa</title>
		<style>
			.masquer{display:none;}
			.afficher{display:block;}
		</style>
	</head>
	<body>
		<select id="select">
			<option value="M">Menu</option>
			<option value="A">Accueil</option>
			<option value="C">Contact</option>
		</select>
		<div id="menu" class="masquer">
			Menu
		</div>
		<div id="accueil" class="masquer">
			Accueil
		</div>
		<div id="contact" class="masquer">
			Contact
		</div>
		<script>			
			document.getElementById('select').onChange=function() {
				var select=document.getElementById('select');
				var choice=select.selectedIndex;
				var valeur=select.options.value;
				while(document.getElementsByClassName('afficher')[0]) {
					document.getElementsByClassName('afficher')[0].className='masquer';
				}
				if(valeur=='M')
					document.getElementById('menu').className='afficher';
				else if(valeur=='A')
					document.getElementById('accueil').className='afficher';
				else if(valeur == "C")
					document.getElementById('contact').className='afficher';
			});
		</script>
	<body>
</html>

Modifié par juliendargelos (28 Aug 2013 - 17:55)
Sujet clos
Aller à