Afficher / Masquer du texte
Résolu
kab51
Messages postés
378
Date d'inscription
Statut
Membre
Dernière intervention
-
kab51 Messages postés 378 Date d'inscription Statut Membre Dernière intervention -
kab51 Messages postés 378 Date d'inscription Statut Membre Dernière intervention -
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 :
Merci pour votre aide :) !
Cordialement,
Kab51
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
A voir également:
- Afficher / Masquer du texte
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Masquer conversation whatsapp - Guide
- Comment masquer les amis sur facebook - Guide
- Comment appeler en masquer - Guide
1 réponse
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:
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>
Merci beaucoup ! :D
Je clos.
Cordialement,
Kab51