11548 sujets

JavaScript, DOM et API Web HTML5

Afficher/masquer div via l'ancre d'url...

Salut,

Structure de ma page :
Nom : toto.html
Menu : meteo, legumes, stars, livres.
JS : affiche la div correspondante et masque les 3 autres via un clic sur le menu.

La page toto.html affiche d'origine la div "accueil".

<a href="javascript:visibilite('meteo');" title="">meteo</a> etc...

var divs = ['accueil','legumes','stars', 'livres']; 

function masquerTout() { 
    for(i = 0 ; i < divs.length ; i++) { 
        document.getElementById(divs[ i]).style.display = 'none'; 
    } 
} 

function visibilite(id) { 
    masquerTout(); 
    var cible = document.getElementById(id); 
    cible.style.display = (cible.style.display == 'none') ? 'block' : 'none' ; 
}



Tout cela fonctionne parfaitement...

Ma question.
Je souhaiterais, pouvoir afficher la bonne div, tout en masquant les autres, lorsque l'on arrive sur la page avec une ancre spécifique.
toto.html#meteo


Comment récupérer cette ancre, la traiter et faire en sorte que le JS affiche la bonne div ?

anchor = window.location.hash;
anchor = anchor.substring(1,anchor.length);

Ca, ça récupère l'ancre, mais je n'arrive pas à forcer le js pour afficher la div...

Merci

Edit : y a une coquille dans le module de balise du code js qui interprète un code [ i ] et met la fin du texte en italique... Smiley cligne
Modifié par Ehplod (16 Feb 2012 - 11:50)
Ok, mais qu'en est-il des :target avec les différents navigateurs ?

Je ne vois pas comment :target peut gérer le masquage des autre div lorsque celle appelé est affiché.


Par contre en js, j'ai bien ma petite idée, mais je sais pas comment faire...

Je récupère la valeur de l'ancre.
Je vérifie si cette ancre est contenu dans mon array.
Si oui, je lance ma fonction visibilite avec id=ancre.

var anchor = window.location.hash;
var anchor = anchor.substring(1,anchor.length); // enleve le #

for(i = 0 ; i < divs.length ; i++) { 
    if(divs[ i] == anchor) {
	visibilite(anchor);
	var anchor = '';
    }
}

... marche pas. Smiley decu
Modifié par Ehplod (16 Feb 2012 - 13:42)
Comme ça ?
<ul>
    <li><a href="#c1">Lien 1</a></li>
    <li><a href="#c2">Lien 2</a></li>
</ul>
<div id="c2">Contenu 2</div>
<div id="c1">Contenu 1</div>

div {
    display : none;
}
div:target {
    display : block;
}
#c1 {
    display : block;
}
div:target ~ #c1 {
    display : none;
}
Il y a même sûrement beaucoup plus simple Smiley biggrin
Toutefois, il est vrai que ce n'est pas compatible avec tous les navigateurs ^^
Ehplod a écrit :
anchor = window.location.hash;
anchor = anchor.substring(1,anchor.length);
Et avec un 
document.getElementById(anchor).style.display = "block"
ça ne fonctionne pas ?
Modifié par Gothor (16 Feb 2012 - 13:44)
Pas mal, mais comment cacher ma div c0 qui est affichée de base si on arrive sur la page sans ancre ?

Gothor a écrit :
Et avec un 
document.getElementById(anchor).style.display = &quot;block&quot;
ça ne fonctionne pas ?

Non, pas mieux... Smiley decu
Modifié par Ehplod (16 Feb 2012 - 13:58)
Ehplod a écrit :
Pas mal, mais comment cacher ma div c0 qui est affichée de base si on arrive sur la page sans ancre ?


Dans le code que je t'ai donné, par défaut, c1 est affiché, si ensuite on sélectionne c2, c1 ne l'est plus, si on resélectionne c1, c'est bien c1 qui est affiché ^^'

En JS...
HTML
<body onload="maFonction()">
    <ul>
        <li><a href="#c1" onclick="maFonction('c1')">Lien 1</a></li>
        <li><a href="#c2" onclick="maFonction('c2')">Lien 2</a></li>
    </ul>

    <div id="c2">Contenu 2</div>

    <div id="c1">Contenu 1</div>
</body>
CSS
div {
    display : none;
}
JavaScript
function hideContent() {
    var divs = document.getElementsByTagName('div');
    for (var i in divs)
        divs[ i].style.display = "none";
}

function maFonction (id) {
    hideContent();
    console.debug(id);
    if (typeof(id) == "undefined") {
        id = window.location.hash;
        if (id != '')
            id = id.substring(1, id.length);
        else
            id = "c1";
    }
    console.debug(id);
    document.getElementById(id).style.display="block";
}

Modifié par Gothor (17 Feb 2012 - 09:03)
Une nuit de repos me fit le plus grand bien.... Smiley lol

Donc, je reprend, en espérant être plus précis dans mon problème... Smiley biggol

Donc, j'ai une page toto.html
contenant plusieurs div, dont :
div1 contenu 1
div2 contenu 2
div3 contenu 3
div4 contenu 4
Un menu de 3 choix :
lien div2
lien div3
lien div4

Lorsque j'appel la page toto.html ou toto.html#contenu seul la div1 est affiché.

Si j'utilise le menu, les div concernés s'affiche, mais les autre se masque (la div1 d'origine aussi)

Si j'accède à la page toto.html#div2, seule la div2 doit s'afficher.
Si j'accède à la page toto.html#div3, seule la div3 doit s'afficher.
Si j'accède à la page toto.html#div4, seule la div4 doit s'afficher.

Voilà.
Modifié par Ehplod (17 Feb 2012 - 08:26)
Ok Smiley biggrin

Mais comme le balisage js du forum déconne, j'ai pas les [ i].

Tu peux éditer pour ajouter un espace afin qu'ils apparaissent ?

Merci
Effectivement, autant pour moi ^^
Il faut vraiment que je songe à renommer mes compteurs quand je dois les poster sur ce forum -_-

J'ai repéré un problème avec la solution JS : Si je suis sur l'ancre #cX et que je vais sur l'ancre #cY en modifiant l'URL, alors le contenu de #cY n'est pas affiché.
C'est dû au fait que la page n'est pas rechargée. (Quand on fait F5 après, c'est bien #cY qui s'affiche).

Notons que ce soucis arrive également avec CSS...
Modifié par Gothor (17 Feb 2012 - 09:19)
OK
Mais j'aimerais comprendre pourquoi mon script fonction qu'à moitié...

Afficher/Masquer fonction parfaitement lorsque l'on est sur la page...
Si j'arrive depuis une url avec la bonne ancre, mon bout de code en plus de fonctionne pas...
for(i = 0 ; i < divs.length ; i++) { 
    if(divs[ i] == anchor) {
    masquerTout(); 
    document.getElementById(divs[ i]).style.display = 'block';
	var anchor = '';
    }
}

Il est pourtant simple...
Je teste si ma var anchor est présente dans ma table divs...
Si elle l'est, je modifie le style de la div en block et je vide la variable anchor.


Fichier JS:
var anchor = window.location.hash;
var anchor = anchor.substring(1,anchor.length); // enleve le #

var divs = ['accueil','meteo, 'legume', 'stars']; 

function masquerTout() { 
    for(i = 0 ; i < divs.length ; i++) { 
        document.getElementById(divs[ i]).style.display = 'none';
    } 
} 


for(i = 0 ; i < divs.length ; i++) { 
    if(divs[ i] == anchor) {
    masquerTout(); 
    document.getElementById(divs[ i]).style.display = 'block';
	var anchor = '';
    }
}

function visibilite(id) { 
    masquerTout(); 
    var cible = document.getElementById(id); 
    cible.style.display = (cible.style.display == 'none') ? 'block' : 'none' ; 
}

(supprimer les espace dans les [ i])

fichier html :

<body onload="onLoad()">
<div id="blabla">blabla</div>
<div id="destrucs">des trucs</div>
<div id="contenu">
	<ul>
	<li><a href="javascript:visibilite('meteo');" title="">meteo</a></li>
	<li><a href="javascript:visibilite('legume');" title="">legume</a></li>
	<li><a href="javascript:visibilite('stars');" title="">stars</a></li>
	</ul>

	<div id="accueil">accueil</div>
	<div id="meteo" style="display:none">meteo</div>
	<div id="legume" style="display:none">legume</div>
	<div id="stars" style="display:none">stars</div>
</div>
</body>

Modifié par Ehplod (17 Feb 2012 - 09:21)
A quel endroit as-tu placé ce code ? Dans l'en-tête ou en pied de page ?

var anchor = window.location.hash;
var anchor = anchor.substring(1,anchor.length); // enleve le #

var divs = ['accueil','meteo, 'legume', 'stars'];

for(i = 0 ; i &lt; divs.length ; i++) { 
    if(divs[ i] == anchor) {
    masquerTout(); 
    document.getElementById(divs[ i]).style.display = 'block';
	var anchor = '';
    }
}
Dans un fichier externe appelé dans le head.

Si je ne met que ça, ça focntionne... Anchor est vidé.
var anchor = window.location.hash;
var anchor = anchor.substring(1,anchor.length); // enleve le #

var divs = ['accueil','meteo, 'legume', 'stars'];

for(i = 0 ; i &lt; divs.length ; i++) { 

    if(divs[ i] == anchor) {

	var anchor = '';
    }
}

Comprend pas pourquoi la condition if ne fait pas exécuter les 2 autres lignes...
Modifié par Ehplod (17 Feb 2012 - 10:48)
Sujet clos
Aller à