[Résolu] Une ancre fantôme ou un retour haut de page redondant par Hologram - page 1

Bonjour à tous et à toutes.

Bon je vais essayer de ne pas trop entrer dans le detail.

Objectif du code
J'ai un groupe de 5 onglets cliquables traitant d'un sujet.
chaque onglet doit afficher une information (texte ou image peu importe) en raport avec le sujet et placée juste en dessous du groupe.
jusque la, pas de problème.

Maintenant je souhaite afficher plusieurs sujets sur une même page donc plusieurs groupes d'onglets.
La encore tout vas bien et tout fonctionne.

Mais ...
Problème du code
Si je clic sur un onglet qui est en bas de page, je suis imédiatement renvoyé en haut comme si j'y avais placé une ancre.

Le satané code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Système d'onglets</title>
<style type="text/css">
#onglet1{
display: block;
}
#onglet2, #onglet3, #onglet4, #onglet5{
display: none;
}
#onglet6{
display: block;
}
#onglet7, #onglet8, #onglet9, #onglet10{
display: none;
}
#onglet11{
display: block;
}
#onglet12, #onglet13, #onglet14, #onglet15{
display: none;
}
</style>
<script type="text/javascript">
function voirOnglet(id, n){ 

		var nbrOnglets = 5;
		var nbrOngletsInactifs = nbrOnglets-1;
		//on cache les onglets
		//i varie selon le nombre d'onglets : à modifier selon vos besoins
		for(var i=(n*nbrOnglets-nbrOngletsInactifs);i<=(n*nbrOnglets);i++)
		{
			document.getElementById('onglet'+i).style.display='none';
		}

		//afficher les onglets quand on clique sur un lien du menu
		if(document.getElementById(id).style.display =='none' )
		{
			document.getElementById(id).style.display = 'block';
		} 
	
}
</script>
</head>

<body>

<a href="#" onclick="voirOnglet('onglet1', 1);"> Onglet 1 </a> |
<a href="#" onclick="voirOnglet('onglet2', 1);"> Onglet 2 </a> |
<a href="#" onclick="voirOnglet('onglet3', 1);"> Onglet 3 </a> |
<a href="#" onclick="voirOnglet('onglet4', 1);"> Onglet 4 </a> |
<a href="#" onclick="voirOnglet('onglet5', 1);"> Onglet 5 </a> 
<div id="onglet1">Onglet 1<br />blabla</div>
<div id="onglet2">Onglet 2<br />lorem ipsum</div>
<div id="onglet3">Onglet 3<br />doloret sit</div>
<div id="onglet4">Onglet 4<br />amet nec</div>
<div id="onglet5">Onglet 5<br />nunc sit elit
</div>

<br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br />
<br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br />

<div class="titreOnglet" id="n2">
<a href="#" onclick="voirOnglet('onglet6', 2);"> Onglet 1 </a> |
<a href="#" onclick="voirOnglet('onglet7', 2);"> Onglet 2 </a> |
<a href="#" onclick="voirOnglet('onglet8', 2);"> Onglet 3 </a> |
<a href="#" onclick="voirOnglet('onglet9', 2);"> Onglet 4 </a> |
<a href="#" onclick="voirOnglet('onglet10', 2);"> Onglet 5 </a> 
<div id="onglet6">Onglet 6<br />blabla</div>
<div id="onglet7">Onglet 7<br />lorem ipsum</div>
<div id="onglet8">Onglet 8<br />doloret sit</div>
<div id="onglet9">Onglet 9<br />amet nec</div>
<div id="onglet10">Onglet 10<br />nunc sit elit</div>
</div>

<br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br />
<br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br /><br /><p>-----------</p><br />

<div class="titreOnglet" id="n3">
<a href="#" onclick="voirOnglet('onglet11', 3);"> Onglet 1 </a> |
<a href="#" onclick="voirOnglet('onglet12', 3);"> Onglet 2 </a> |
<a href="#" onclick="voirOnglet('onglet13', 3);"> Onglet 3 </a> |
<a href="#" onclick="voirOnglet('onglet14', 3);"> Onglet 4 </a> |
<a href="#" onclick="voirOnglet('onglet15', 3);"> Onglet 5 </a> 
<div id="onglet11">Onglet 6<br />blabla</div>
<div id="onglet12">Onglet 7<br />lorem ipsum</div>
<div id="onglet13">Onglet 8<br />doloret sit</div>
<div id="onglet14">Onglet 9<br />amet nec</div>
<div id="onglet15">Onglet 10<br />nunc sit elit</div>
</div>

</body>
</html>

Voili voilou,
Quelqu'un peut il m'aider?

Merci

Hologram

9 janvier 2009 à 0:54:58

Anonyme

9 janvier 2009 à 1:10:04

Il faut que voirOnglet retourne false. L'action par défaut (suivre le lien) est alors annulée.

ou tu peux remplacer # par #nogo. Rien ne bougera.

pour info href="#" c'est fait exprès pour aller en haut de page.

9 janvier 2009 à 8:41:27

J'ai honte.

je te remerci beaucoup

Golmote

9 janvier 2009 à 9:05:00

Mets ton sujet en résolu si tout est ok.

9 janvier 2009 à 13:36:29

J'ai utilisé le #nogo et ça marche très bien.

Resolu!

Merci à tous.

Une ancre fantôme ou un retour haut de page redondant

Une ancre fantôme ou un retour haut de page redondant

Supprimer

Modérer

Signaler le message aux modérateurs