Partage

Menu Onglet Tous Simple

1 2 >>

Sujet résolu

Anonyme

24 juin 2009 à 4:01:39

Bonsoirs,

J'aimerais créer un simple menu en onglet, mais voila je rencontre des souci

les leins des onglet ne marche pas comme si il était désactiver.

CODE :

function multiClass(eltId) 
{
	var arrLinkId = ['0','1','2','3'];
	var intNbLinkElt = arrLinkId.length;
	var arrClassLink = ['onglet-actif','onglet-inactif'];
	var strContent = '';
}
var pages = { "default": 0, "/forum/": 1, "/partenaires.php": 2, "/contact.php":3 };
window.onload = function() 
{
	var url = window.location.href;
	var pg = /^.+?\/\/.+?\/(.*)$/i.exec(url);
	pg = pg[1];
	if (pages[pg]) 
	{
		var id = pages[pg];
	}
	else 
	{
		var id = pages['default'];
	}

	multiClass(id);
};

Qui peut m'aider s'il vous plait ?

Merci d'avance !

Golmote

24 juin 2009 à 4:18:31

Euh... on peut voir le code de la page complète ?

Parce que là, en soit, le code ne fait rien sur ta page...

Anonyme

24 juin 2009 à 4:49:55

HTML :

<div id="onglet">
						<ul>
							<li class="onglet-actif"><a href="/accueil.php" id="lien0" onclick="multiClass(0); return false;">Accueil</a></li>
							<li class="onglet-inactif"><a href="" id="lien1" onclick="multiClass(1); return false;" style="margin-left: 10px;">Forum</a></li>
							<li class="onglet-inactif"><a href="" id="lien2" onclick="multiClass(2); return false;" style="margin-left: 10px;">Partenaires</a></li>
							<li class="onglet-inactif"><a href="/contact.php" id="lien3" onclick="multiClass(3); return false;" style="margin-left: 10px;">Contact</a></li>
							<li class="onglet-inactif"><a href="/radio.html" id="lien4" onclick="multiClass(4); return false;" style="margin-left: 10px;">Radio</a></li>
						</ul>
					</div>

Golmote

24 juin 2009 à 5:07:18

Hum... et c'est tout ? Pas d'autre JS ?

Il sort d'où ce code Javascript, c'est toi qui l'a écrit ?

xavierm02

24 juin 2009 à 8:44:41

Il y a un tutoriel dans la partie HTML du SdZ...
Et je suis pas convaincu que les - soient acceptés dans les noms de class.

Anonyme

24 juin 2009 à 15:58:32

Il y a que sa !

xavierm02

24 juin 2009 à 16:01:00

Anonyme

24 juin 2009 à 16:17:31

Il y a que sa comme code, pourquoi ce n'est pas suffisant ? :euh:

HTML :

<div id="onglet">
	<ul>
		<li class="onglet-actif"><a href="/accueil.php" id="lien0" onclick="multiClass(0); return false;">Accueil</a></li>
		<li class="onglet-inactif"><a href="" id="lien1" onclick="multiClass(1); return false;" style="margin-left: 10px;">Forum</a></li>
		<li class="onglet-inactif"><a href="" id="lien2" onclick="multiClass(2); return false;" style="margin-left: 10px;">Partenaires</a></li>
		<li class="onglet-inactif"><a href="/contact.php" id="lien3" onclick="multiClass(3); return false;" style="margin-left: 10px;">Contact</a></li>
		<li class="onglet-inactif"><a href="/radio.html" id="lien4" onclick="multiClass(4); return false;" style="margin-left: 10px;">Radio</a></li>
	</ul>
</div>

JS :

function multiClass(eltId) 
{
	var arrLinkId = ['0','1','2','3'];
	var intNbLinkElt = arrLinkId.length;
	var arrClassLink = ['onglet-actif','onglet-inactif'];
	var strContent = '';
}
var pages = { "default": 0, "/forum/": 1, "/partenaires.php": 2, "/contact.php":3 };
window.onload = function() 
{
	var url = window.location.href;
	var pg = /^.+?\/\/.+?\/(.*)$/i.exec(url);
	pg = pg[1];
	if (pages[pg]) 
	{
		var id = pages[pg];
	}
	else 
	{
		var id = pages['default'];
	}

	multiClass(id);
};

xavierm02

24 juin 2009 à 16:50:59

Bah qu'est-ce qui ne marche pas ?

Anonyme

24 juin 2009 à 17:02:20

Problème rencontrer :

- Les liens des onglets ne marche pas comme si il était désactiver.
- Donc quand je clique sur un onglet je reste sur la même page l'onglet par défaut reste en actif et celui que je clique et en actif aussi !

xavierm02

24 juin 2009 à 17:25:07

T'as lu ça : http://www.siteduzero.com/tutoriel-3-3 [...] -onglets.html ?

Anonyme

24 juin 2009 à 17:58:40

C'est en PHP sa m'intéresse pas !

Golmote

24 juin 2009 à 18:17:25

Citation : Golmote

Il sort d'où ce code Javascript, c'est toi qui l'a écrit ?

Anonyme

24 juin 2009 à 18:42:58

OUI !!!

Golmote

24 juin 2009 à 19:10:08

Hm. Essaie un truc comme ça :

<div id="onglet">
	<ul>
		<li class="onglet-actif"><a href="/accueil.php" id="lien0">Accueil</a></li>
		<li class="onglet-inactif"><a href="" id="lien1" style="margin-left: 10px;">Forum</a></li>
		<li class="onglet-inactif"><a href="" id="lien2" style="margin-left: 10px;">Partenaires</a></li>
		<li class="onglet-inactif"><a href="/contact.php" id="lien3" style="margin-left: 10px;">Contact</a></li>
		<li class="onglet-inactif"><a href="/radio.html" id="lien4" style="margin-left: 10px;">Radio</a></li>
	</ul>
</div>
<script type="text/javascript">
function multiClass(eltId) 
{
	var arrLinkId = ['0','1','2','3'];
	var intNbLinkElt = arrLinkId.length;
	var arrClassLink = ['onglet-actif','onglet-inactif'];
	var strContent = '';
	for(var i=0;i<intNbLinkElt;i++) {
	  document.getElementById("lien"+i).parentNode.className = arrClassLink[1];
	}
	document.getElementById("lien"+eltId).parentNode.className = arrClassLink[0];
}
var pages = { "default": 0, "/forum/": 1, "/partenaires.php": 2, "/contact.php":3 };
window.onload = function() 
{
	var url = window.location.href;
	var pg = /^.+?\/\/.+?\/(.*)$/i.exec(url);
	pg = pg[1];
	if (pages[pg]) 
	{
		var id = pages[pg];
	}
	else 
	{
		var id = pages['default'];
	}

	multiClass(id);
};

</script>

J'ai enlevé le blocage des liens, et j'ai ajouter la gestion de la class active dans la fonction mutliClass().

Anonyme

24 juin 2009 à 20:17:58

Avec ton code les liens fonctionne

mais l'onglet ne ce mais pas en actif :euh:

Golmote

24 juin 2009 à 20:24:21

Le script est présent sur les autres pages ? (les destinations des liens)

Anonyme

24 juin 2009 à 20:39:14

Oui j'ai mis sa sur tous les pages :

<script type="text/javascript" src="/js/menu-onglet.js"></script>

Golmote

24 juin 2009 à 21:49:04

Fais des tests avec des alert()

Comme un alert(pg) entre les lignes 27 et 28 (28 et 29 si tu as le même décalage que chez moi

), et un alert(eltId) entre les lignes 12 et 13... ?

Histoire de vérifier si tu récupères bien ce que tu veux...

Anonyme

27 juin 2009 à 19:13:05

Pas compris...

Golmote

28 juin 2009 à 20:32:30

Bah vérifies que tu récupères bien les valeurs voulues aux instants voulus !

Le meilleur moyen pour ça (enfin le plus simple), c'est de tester ces valeurs en faisant des alert().

Anonyme

28 juin 2009 à 21:11:15

Et on fait comment pour intégrer et faire ces alert.

Golmote

28 juin 2009 à 23:17:34

Hm... j'ai comme l'impression de me répéter...

En ajoutant alert(pg); entre les lignes 27 et 28.
Et aussi alert(eltId) entre les lignes 12 et 13.

Ceci afin de vérifier la valeur de "pg" et de "eltId" aux deux endroits indiqués...

Si jamais tu n'y arrives toujours pas, je serai obligé de considérer que tu ne connais pas le Javascript...

Anonyme

28 juin 2009 à 23:39:31

Je sais ce que c'est

Golmote

29 juin 2009 à 0:02:35

** va se pendre... **

Si je te donne des numéros de ligne, c'est pas pour les chiens, tu sais... c'est pour que tu insères les alert() dans ton code Javascript aux endroits que j'ai indiqués !

Dans ton fichier externe machin-onglet.js quoi !

xavierm02

29 juin 2009 à 9:09:31

Hahaha

T'as réussit à désespérer Golmote

Bien joué

Anonyme

3 juillet 2009 à 14:40:38

Sa fait rien du tous

function multiClass(eltId) 
{
	var arrLinkId = ['0','1','2','3'];
	var intNbLinkElt = arrLinkId.length;
	var arrClassLink = ['onglet-actif','onglet-inactif'];
	var strContent = '';
	for(var i=0;i<intNbLinkElt;i++) {
	  document.getElementById("lien"+i).parentNode.className = arrClassLink[1];
	}
	document.getElementById("lien"+eltId).parentNode.className = arrClassLink[0];
}
var pages = { "default": 0, "/forum/": 1, "/partenaires.php": 2, "/contact.php":3 };
alert(eltId) 
window.onload = function() 
{
	var url = window.location.href;
	var pg = /^.+?\/\/.+?\/(.*)$/i.exec(url);
	pg = pg[1];
	if (pages[pg]) 
	{
		var id = pages[pg];
	}
	else 
	{
		var id = pages['default'];
	}

	multiClass(id);
	alert(pg);
};

Golmote

3 juillet 2009 à 14:44:00

Ton alert(eltId) est mal placé. Il faudrait le placer entre les lignes 2 et 3.

Une fois déplacé, redis moi ce qu'il se passe :
Les boîtes de dialogue ne s'affichent pas du tout ?
Elles s'affichent, mais sont vides ?
Elles affichent quelque chose ? Si oui, quoi ?

Anonyme

3 juillet 2009 à 16:20:38

Les boîtes de dialogue ne s'affichent pas du tout.

function multiClass(eltId) 
{
	alert(eltId) 
	var arrLinkId = ['0','1','2','3'];
	var intNbLinkElt = arrLinkId.length;
	var arrClassLink = ['onglet-actif','onglet-inactif'];
	var strContent = '';
	for(var i=0;i<intNbLinkElt;i++) {
	  document.getElementById("lien"+i).parentNode.className = arrClassLink[1];
	}
	document.getElementById("lien"+eltId).parentNode.className = arrClassLink[0];
}
var pages = { "default": 0, "/forum/": 1, "/partenaires.php": 2, "/contact.php":3 };
window.onload = function() 
{
	var url = window.location.href;
	var pg = /^.+?\/\/.+?\/(.*)$/i.exec(url);
	pg = pg[1];
	if (pages[pg]) 
	{
		var id = pages[pg];
	}
	else 
	{
		var id = pages['default'];
	}

	multiClass(id);
	alert(pg);
};

Golmote

3 juillet 2009 à 17:25:20

Bon, bah on va en mettre partout alors... :-°

function multiClass(eltId) 
{
	alert("Début de multiclass : "+eltId) 
	var arrLinkId = ['0','1','2','3'];
	var intNbLinkElt = arrLinkId.length;
	var arrClassLink = ['onglet-actif','onglet-inactif'];
	var strContent = '';
	for(var i=0;i<intNbLinkElt;i++) {
	  document.getElementById("lien"+i).parentNode.className = arrClassLink[1];
	}
	document.getElementById("lien"+eltId).parentNode.className = arrClassLink[0];
alert("fin de multiclass");
}
var pages = { "default": 0, "/forum/": 1, "/partenaires.php": 2, "/contact.php":3 };
window.onload = function() 
{
  alert("chargement de la page terminé");
	var url = window.location.href;
	var pg = /^.+?\/\/.+?\/(.*)$/i.exec(url);
	pg = pg[1];
        alert(pg);
	if (pages[pg]) 
	{
		var id = pages[pg];
	}
	else 
	{
		var id = pages['default'];
	}

alert("appel de multiclass avec paramètre : "+id);

	multiClass(id);
   alert("fin du script");
};

Bon, lesquelles s'affichent, et elles affichent quoi ?

Note : si aucune ne s'affiche, il faut soit que tu revoies ton inclusion du script qui est mauvaise, soit que tu réactives le Javascript dans ton navigateur... :-°

1 2 >>