Afficher / Masquer du texte [Résolu/Fermé]

Signaler
Messages postés
388
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
20 janvier 2019
-
Messages postés
388
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
20 janvier 2019
-
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

Messages postés
28110
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 avril 2020
2 252
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 80500 internautes nous ont dit merci ce mois-ci

Messages postés
388
Date d'inscription
dimanche 28 décembre 2008
Statut
Membre
Dernière intervention
20 janvier 2019
74
C'est simplement parfait!
Merci beaucoup ! :D

Je clos.

Cordialement,
Kab51