Afficher / Masquer du texte
Résolu
kab51
Messages postés
443
Statut
Membre
-
kab51 Messages postés 443 Statut Membre -
kab51 Messages postés 443 Statut Membre -
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
- Comment masquer les amis sur facebook - Guide
- Masquer conversation whatsapp - 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