Afficher / Masquer du texte

Résolu/Fermé
kab51 Messages postés 378 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 12 juin 2022 - 20 déc. 2014 à 04:50
kab51 Messages postés 378 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 12 juin 2022 - 23 déc. 2014 à 00:47
Bonjour,

Voici ma problématique :

Je veux faire un site internet simpliste, composé d'une page HTML et d'une page CSS.
L'idée est de mettre tout le contenu dans la page HTML unique, et de le faire apparaître / disparatre grêce à du Javascript.

J'ai réussi à faire apparaître le texte grêce aux liens, mais j'aimerais maintenant qu'il disparaisse lorsque l'on clique sur un autre lien, pour laisser place à une autre partie du contenu.

Voici les parties de code qui nous intérèssent :

		function visibilite(thingId)
		{
		var targetElement;
		targetElement = document.getElementById(thingId) ;
		if (targetElement.style.display == "none")
		{
		targetElement.style.display = "" ;
		} else {
		targetElement.style.display = "none" ;
		}
		}


<nav id="menu"> 
			<ul> 
				<li> 
					<li class="menu1">
						<a href="#">MENU1</a> 
						<ul class="ssmenu1"> 
							<li><a href="" onclick="javascript:visibilite('id_div_1'); return false;">lien sous menu 1</a></li> 
							<li><a href="" onclick="javascript:visibilite('id_div_2'); return false;">lien sous menu 2</a></li> 
							<li><a href="#">lien sous menu 3</a></li> 
							<li><a href="#">lien sous menu 4</a></li> 
						</ul> 
					</li> 

<!--Code non important pour la compréhansion-->

<div id="content">
			<div id="content_top"></div>
			<div id="content_main">
				<div id="id_div_1" style="display:none;">
					<h1>Page Content</h1>
					<h1>Page Content</h1>
				</div>
				<div id="id_div_2" style="display:none;">
					<h1>Page Content2</h1>
					<h1>Page Content2</h1>
				</div>
			</div>
			<div id="content_bottom"></div>
			<div id="footer"></div>
		</div>


Merci pour votre aide :) !

Cordialement,
Kab51

1 réponse

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
20 déc. 2014 à 12:03
Bonjour,

Tu peux utiliser le nom d'une CLASS ( même bidon..pas besoin qu'elle existe dans ton CSS..) pour masquer TOUS les éléments ayant cette CLASS ... puis tu n'affiche QUE l'élément pour lequel tu as cliqué :

Exemple:

<script type="text/javascript">

		
// Pour les "vieux" Navigateurs < IE9
if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}		


// Masque tous les élements d'une CLASS
function HideAllElemByCLassName(class_name){
  var ArrElem = document.getElementsByClassName(class_name);
   for ( x=0;x<ArrElem.length;x++){
	  //console.log(ArrElem[x].id);
	  ArrElem[x].style.display = "none";  
   }

}		


function visibilite(thingId){	
	HideAllElemByCLassName("maclassBidon");
	var targetElement;
	targetElement = document.getElementById(thingId) ;
	targetElement.style.display = "" ;
	
}
</script>

<nav id="menu"> 
			<ul> 
				<li> 
					<li class="menu1">
						<a href="#">MENU1</a> 
						<ul class="ssmenu1"> 
							<li><a href="" onclick="javascript:visibilite('id_div_1'); return false;">lien sous menu 1</a></li> 
							<li><a href="" onclick="javascript:visibilite('id_div_2'); return false;">lien sous menu 2</a></li> 
							<li><a href="#">lien sous menu 3</a></li> 
							<li><a href="#">lien sous menu 4</a></li> 
						</ul> 
					</li> 

<!--Code non important pour la compréhansion-->

<div id="content">
			<div id="content_top"></div>
			<div id="content_main">
				<div class="maclassBidon" id="id_div_1" style="display:none;">
					<h1>Page Content</h1>
					<h1>Page Content</h1>
				</div>
				<div class="maclassBidon" id="id_div_2" style="display:none;">
					<h1>Page Content2</h1>
					<h1>Page Content2</h1>
				</div>
			</div>
			<div id="content_bottom"></div>
			<div id="footer"></div>
		</div>

1
kab51 Messages postés 378 Date d'inscription dimanche 28 décembre 2008 Statut Membre Dernière intervention 12 juin 2022 89
23 déc. 2014 à 00:47
C'est simplement parfait!
Merci beaucoup ! :D

Je clos.

Cordialement,
Kab51
0