[Résolu] Rendre inactif un lien vers Div cachée lorsque celle ci est

Bonjour,

Je suis néophyte dans le domaine des script...
J'utilise un script ( trouvé sur le net) pour l'affichage de div cachées, celui-fonctionne bien.
Mon soucis, c'est que lorsqu'une div est affichée, son lien reste actif ( si je clique de nouveau dessus, la div se cache.)
Je souhaiterais désactiver les liens lorsque la div correspondante est affichée.

Voici le script,

 <script>
function visibilite(thingId, hideAll)
{
	var targetElement = document.getElementById(thingId),
	allTargets = document.getElementById(hideAll).getElementsByTagName('div'),
	i,
	l = allTargets.length;
	for(i = 0; i<l; i++)
	{
		if(allTargets[i] == targetElement) { continue; }
		allTargets[i].style.display = "none";
	}
	if (targetElement.style.display == "none")
	{
		targetElement.style.display = "" ;
	} else {
		targetElement.style.display = "none" ;
	}
}
</script>

les lien dans la page,

<a href="javascript:visibilite('div_texte1','textes');"> lien texte 1</a>
<a href="javascript:visibilite('div_texte2','textes');"> lien texte 2</a>
<a href="javascript:visibilite('div_texte3','textes');"> lien texte 3</a>

les div dans la page,

<div id="textes">
<div id="div_texte1" style="display:block;"> texte 1 </div>
<div id="div_texte2" style="display:none;"> texte 2  </div>
<div id="div_texte3" style="display:none;"> texte 3  </div>
</div>

D'avance merci pour l'aide que l'on pourrait m'apporter.
(J’espère avoir posté dans le bon topic )
Ketal.[/i][/i]
Modifié par Ketal (23 Jan 2013 - 18:35)

Salut,
Alors pour ne pas recacher la div après son apparition, il te suffit de supprimer cette ligne :

function visibilite(thingId, hideAll)
{
	var targetElement = document.getElementById(thingId),
	allTargets = document.getElementById(hideAll).getElementsByTagName('div'),
	i,
	l = allTargets.length;
	for(i = 0; i<l; i++)
	{
		if(allTargets == targetElement) { continue; }
		allTargets[i].style.display = "none";
	}
        // Ligne à enlever. Elle dit que si le style est none alors il le "supprime"
	/*if (targetElement.style.display == "none")
	{
		targetElement.style.display = "" ;
	} */
        if {
		targetElement.style.display = "none" ;
	}
}

Maintenant, ce n'est pas très bien de mettre dans le href d'un a du javascript.
Pas très accessible.
pour cela je te propose le code ci dessous qui n'est pas le plus optimisé mais qui te permettra de rendre tes liens accessible même si javascript n'est pas activée.

<div id="lien">
<a href="#div_texte1" > lien texte 1</a>
<a href="#div_texte2" > lien texte 2</a>
<a href="#div_texte3" > lien texte 3</a>
</div>

<div id="textes">
<div id="div_texte1"> texte 1 </div>
<div id="div_texte2"> texte 2  </div>
<div id="div_texte3"> texte 3  </div>
</div>

#div_texte2, #div_texte3{
 display: none
}

(function(){
// Permet d'ajouter un évenement quelque soit le navigateur (attachEvent pour IE< IE9).
function addEvent ( obj, evType, fn, useCapture ) {
	if ( obj.addEventListener ) { obj.addEventListener(evType, fn, useCapture); }
	else { obj.attachEvent( "on" + evType, fn ); }
}
/* Si tu veux cacher les div en javascript et pas avec le css, voici le code, comme ça si il n'y a pas de javascript, ils apparaissent : */
var cible = document.getElementById('textes'),
element = cible.getElementsByTagName('div'),
element_length  = element.length;
for(var i=0;i<element_length;i++){
 if(i<0){
  element[i].style.display = 'none';
 }
}
//Je récupére les élements auquels je rajoute un évenement : click.
cible  = document.getElementById('lien');
element = cible.getElementsByTagName('a');
element_length = element.length;
for(var i=0;i<element_length;i++){
	if(i>0){
	addEvent(element[i], 'click',visible,false);
	};
}
// Je recupére l'element qui à declenché l'évenement. 
// Si l'element n'a pas un style = block alors je récupére le href du lien.
// Je prends que la partie aprés le dernier #
// Je mets le style à none et je supprime l'écouteur du lien.
function visible(e){
	var e = e.target || e.currentTarget;
	if(e.style.display != 'block'){
		var pos = e.href.lastIndexOf('#'),
		id = e.href.slice(pos+1);
		document.getElementById(id).style.display = 'block';
		e.removeEventListener('click',visible, false);
	}
}
})();

Le code peut paraitre plus long mais il est plus flexible que l'autre (ex : pas besoin de refaire tous les liens pour changer la div).

J’espère avoir répondu à ta question.

Ps: il est peut être utile de le faire apparaitre en fondu :
compatible tous navigateur.

function setOpacity(elem, value) {
		value = (value == 1)?0.99999:value;
	
		elem.style.opacity = value;
		elem.style.filter = 'alpha(opacity=' + value*100 + ')';
		elem.style.MozOpacity = value;
		elem.style.KhtmlOpacity = value;
}
// En rajoutant un setTimeout, tu peux faire appraitre la div avec une transition.

++++++
[/i][/i][/i]

Bonsoir renard13 , et merci de ta réponse,

Je vais essayer ces scripts, et je te tiendrai au courant...

Encore merci.

Ketal.

Bonjour,

J'ai essayé la modification que tu m'a proposée, mais cela ne semble pas fonctionner, mauvaise manip de ma part ?
j'ai donc utilisé le script que tu as proposé,cela fonctionne bien, mais je n'ai plus le résultat souhaité.

En relisant mieux ton post

a écrit :
Salut,
Alors pour ne pas recacher la div après son apparition, il te suffit de supprimer cette ligne :

Je me rend compte que je n'ai peut être pas été assez explicite dans ma demande.

Voici ce que je recherche a faire:

Au départ la div "texte 1" est affichée...
En cliquant sur le " lien texte 2", la div "texte 2" s’affiche en "remplaçant" la première,
Idem avec la troisième.

La div "texte3" étant affichée, si je reclique sur le " lien texte 1" ou " lien texte 2" la div correspondante "remplace" celle affichée.
Il n'y a donc qu'une seule div affichée a la fois .
Mais avec le script que j'utilise si je clique sur le lien de la div affichée celle -ci se cache et je n'ai plus rien d'affiché.
Je souhaiterai que le lien vers la div soit désactivé "seulement" lorsque celle-ci est affichée, mais qu'il (le lien) redevienne actif si j'affiche une autre div.

Exemple:
Si la div "texte3" est affichée,
je dois pouvoir cliquer sur les liens des divs "texte2" ou "texte1",pour les affichées( les divs),
mais ne pas cacher la div "texte3" si je reclique sur le "lien texte3".
Puis ayant cliqué sur "lien texte1" par exemple, la div correspondante s'affiche, son lien devient donc inactif, et le lien vers la div "texte 3" redevient actif.


En fait c'est un menu de navigation qui pointe vers des divs cachées, au lieu de pages.

Voila, j’espère n’êtrepas trop confus avec mes explications...

un exemple du script sur ce blog => ici

KetaL.
Modifié par Ketal (28 Jan 2013 - 00:11)

salut,
Ok, alors voici le scirpt qui quand tu clique sur un lien, affiche la div correspondante, enlève l’écouteur du lien.
Dans le même temps, la div précédent prend le style none et le lien qui affiché cette div récupère son écouteur.
Si j'ai bien tous compris c'est ce que tu souhaitais :

(function(){
// Permet d'ajouter un évenement quelque soit le navigateur (attachEvent pour IE< IE9).
function addEvent ( obj, evType, fn, useCapture ) {
	if ( obj.addEventListener ) { obj.addEventListener(evType, fn, useCapture); }
	else { obj.attachEvent( "on" + evType, fn ); }
}
var visible = {
	etat: 'div_texte1', // Div afficher
	id: 'lien1', // Lien désactivé
	init : function(e){
		// On recupére l'element qui à declenché l'évenement. 
			var e = e.target || e.srcElement;
		// Si une div etait afficher, alors on l'a cache et on remet un ecouteur sur le lien.
		if(visible.etat != false){
			document.getElementById(visible.etat).style.display = 'none';
			addEvent(document.getElementById(visible.id), 'click',visible.init,false);
		}
		// Si l'element n'a pas un style = block alors je récupére le href du lien.
		if(e.style.display != 'block'){
			// On prends que la partie aprés le dernier #
			var pos = e.href.lastIndexOf('#'),
			id = visible.etat = e.href.slice(pos+1);
			visible.id = e.id;
			// On mets le style à none et je supprime l'écouteur du lien.
			document.getElementById(id).style.display = 'block';
			if(e.removeEventListener){
				e.removeEventListener('click',visible.init, false);	
			}
			else{ //IE<9
				e.detachEvent('onclick',visible.init, false);	
			}
		}
	}	
}
//On récupére les élements auquels je rajoute un évenement : click.
var cible  = document.getElementById('lien'),
element = cible.getElementsByTagName('a'),
element_length = element.length;
for(var i=0;i<element_length;i++){
	if(i>0){
	addEvent(element[i], 'click',visible.init,false);
	};
}
})();

+++[/i]

salut renard13.

Je ne suis pas très doué pour les langues, encore moins pour les langages .
Je te remercie pour pour ton aide,

très cordialement, Ketal.