11548 sujets

JavaScript, DOM et API Web HTML5

Alterner 2 div

Bonjour a tous,

j'ai un soucis en voulant alterner 2 div avec un lien.

JAVASCRIPT
<script type="text/javascript">
function alterner(obj1, obj2){
	var el = document.getElementById(obj1);
	var el2 = document.getElementById(obj2);
	if(el.style.display != "block"){
		el.style.display = "block";
		el2.style.display = "none";
	}else{
		el2.style.display = "block";
		el.style.display = "none";
	}
}
</script>

Lien
<a onclick="alterner('profile_1','profile_1_edit');" title="Switch the Menu">Edit</a>

HTML

<div id="profile_1">
         	INFOS
 </div>
  <div id="profile_1_edit"
            EDITION
  </div>


le probleme est que quand je clique la premiere fois sur le lien, il n'alterne pas au premier clic (apres c'est bon), il affiche la div profile_1_edit.
Si je rajoute : style="display:none; à la div profile_1_edit, il n'alterne toujours pas au premier clic, mais dans ce cas, il affiche la div (qui est en display none) donc il n'affiche rien.

Que faire pour initialiser profile_1_edit a display:none et des le premier clic, que cela alterne les div !

Merci Smiley confus
Bonjour,

Pour commencer, je place ce sujet dans le salon Javascript où il me semble plus à sa place.

Ensuite, il me semble que le problème vient du fait que element.style.display ne retourne une valeur que si l'élément a un attribut HTML style avec propriété CSS display renseignée. Autrement dit (et sauf erreur de ma part), element.style.display ne permet pas de récupérer la valeur de display qui serait affectée via une feuille de style interne ou externe ou via les styles par défaut du navigateur.

Solution «quick 'n dirty»: partir du code HTML suivant...
<div id="profile_1" style="display: block;">
	INFOS
</div>
<div id="profile_1_edit" style="display: none;">
	EDITION
</div>


Dans les solutions qui n'imposent pas de corriger le code HTML:
1. Travailler avec une variable que tu initialises au début et qui indique quel bloc doit être affiché (ou quel bloc doit être caché). Et à chaque appel de la fonction alterner, tu modifies la valeur de cette variable.

2. Écrire le style="display: ..." au lancement de la page via une fonction JS toute simple:
function prepareAlternance(obj1, obj2) {
	document.getElementById(obj1).style.display = "block";
	document.getElementById(obj2).style.display = "none";
}

Ainsi au chargement de la page tu fais un prepareAlternance("un", "deux");, et au clic sur un onglet ou autre dispositif prévu tu peux utiliser alterner("un", "deux");.
Sujet clos
Aller à