Onglet ne ce mette pas en active.

1 2 >>

Sujet résolu

Anonyme

6 juin 2009 à 10:30:38

Salut,

Voilà j'ai créer ceci pour mon menu en onglet mais les menus n'arrive pas à ce mettre en active :euh:

.

Code CSS :

#onglet a:hover, #onglet a:active, #onglet a:focus {
	background-image: url('http://site.manga-online.fr/templates/ja_sanidine_II_template_j15/images/mainnav-hover.gif');
	background-repeat: repeat-x;
	background-position: center bottom;
	color:#FFFFFF;
}
#onglet li.active a, #onglet li.active a:hover, #onglet li.active a:active, #onglet li.active a:focus {
	background:transparent url('http://site.manga-online.fr/templates/ja_sanidine_II_template_j15/images/red/mainnav-active-2.gif'); 
	background-repeat :repeat-x;
	background-position: center top;
	color:#FFFFFF;
	font-size:105%;
}
#nav .on{
	display: block;
} 
#nav .off{
	display: none;
}

Code Javascript :

<script type="text/javascript">//MENU EN ONGLET
	function multiClass(eltId) 
	{
	        arrLinkId = new Array('0','1','2','3','4','5','6');
		intNbLinkElt = new Number(arrLinkId.length);
		arrClassLink = new Array('active','inactive');
		strContent = new String()
		for (i=0; i<intNbLinkElt; i++) 
		{
			        strContent = "menu"+arrLinkId[i];
			if ( arrLinkId[i] == eltId ) 
			{
			       document.getElementById(arrLinkId[i]).className = arrClassLink[0];
			       document.getElementById(strContent).className = 'on';
			}
			else 
			{
			       document.getElementById(arrLinkId[i]).className = arrClassLink[1];
			       document.getElementById(strContent).className = 'off';
			}
		}
	}
</script>

Code HTML :

<div id="onglet">
		<ul>
			<li class="active"><a href="/" id="0"><span>Accueil</span></a></li>
			<li class="inactive"><a href="/animes/" id="1"><span>Streaming</span></a></li>
			<li class="inactive"><a href="/filmsoavs/" id="2"><span>Films et Oavs</span></a></li>
			<li class="inactive"><a href="/dessins.php" id="3"><span>Dessins</span></a></li>
		</ul>
	</div>
	<div id="nav">
		<div id="menu0" class="on">
			<a href="">Forum</a> 
			<a href="">Liens Web</a> 
			<a href="/donation.php">Donation</a>
			<a href="/contact.php">Contact</a> 
			<a href="/admin/">Administration</a>
		</div>
		<div id="menu1" class="off">
			<ul style="padding-left:10px;">
				<?php
					mysql_connect("localhost", "root", "");
					mysql_select_db("mangas39");

					$alphabet = array('0-9'); // ligne modifiée
					for($i = 'A'; $i != 'AA'; $i++)
					{
						$alphabet[] = $i;
					}
					if(isset($_GET['tri']) AND in_array($_GET['tri'], $alphabet))
					{
						$tri = $_GET['tri'];
						$tri == '0-9' ? $where = "REGEXP '^([0-9]+)'" : $where = "LIKE '$tri%'"; // ligne ajoutée
						$req = mysql_query("SELECT titre, id FROM anime WHERE titre $where");  // ligne modifiée
						while($dat = mysql_fetch_assoc($req))
						{
							echo '<a href="/animes/fiche.php?id='.$dat['id'].'">'.$dat['titre'].'</a><br />';
						}
					}
					else
					{
						foreach($alphabet as $list)
						{
							echo '<li><a href="/animes/index.php?tri='.$list.'">'.$list.'</a></li>';
						}
					}
					mysql_close();
				?>
			</ul>
		</div>
		<div id="menu2" class="off"></div>
		<div id="menu3" class="off"></div>
	</div>

Qui peut m'aider s'il vous plait ?

Merci d'avance !

Tillertan

6 juin 2009 à 10:34:21

On pourrait pas voir la page online?
Car la j'imagine pas ce qui marche pas

Et en plus propre (N'oublie pas les "var" qui sont importants):

<script type="text/javascript">//MENU EN ONGLET
	function multiClass(eltId) 
	{
	        var arrLinkId = ['0','1','2','3','4','5','6'];
		var intNbLinkElt = arrLinkId.length;
		var arrClassLink = ['active','inactive'];
		var strContent = '';
		for (var i = 0; i < intNbLinkElt; i++) 
		{
			strContent = "menu" + arrLinkId[i];
			if (arrLinkId[i] == eltId) 
			{
			       document.getElementById(strContent).className = 'on';
			}
			else 
			{
			       document.getElementById(strContent).className = 'off';
			}
		}
	}
</script>

Anonyme

6 juin 2009 à 10:36:25

Je le fait en local, j'ai pu de place sur mon FTP.

Tillertan

6 juin 2009 à 10:38:11

Tu n'as même pas genre 4Ko? -.-

Regarde le post en haut, j'ai refais ton code en plus joli

Anonyme

6 juin 2009 à 10:41:15

En faite si tu regarde ici http://site.manga-online.fr/ tu peut voir un menu en onglet et un sous menu qui va avec chaque onglet et bien moi c'est sa sauf que c'est toujours le premier onglet qui est en actif et sa affiche toujours aussi sont sous menu.

Tillertan

6 juin 2009 à 10:45:32

<script type="text/javascript">//MENU EN ONGLET
	function multiClass(eltId) 
	{
	        var arrLinkId = ['0','1','2','3','4','5','6'];
		var intNbLinkElt = arrLinkId.length;
		var arrClassLink = ['active','inactive'];
		var strContent = '';
		for (var i = 0; i < intNbLinkElt; i++) 
		{
			strContent = "menu" + arrLinkId[i];
			if (arrLinkId[i] == eltId) 
			{
				document.getElementById('lien' + arrLinkId[i]).className = arrClassLink[0];
				document.getElementById(strContent).className = 'on';
			}
			else 
			{
				document.getElementById(strContent).className = 'off';
				document.getElementById('lien' + arrLinkId[i]).className = arrClassLink[1];
			}
		}
	}
</script>

Sur tes liens remplace id="X" par id="lienX", les ids sont pas faite pour n'avoir qu'un numero dedans.

Ensuite dans le code que tu nous montres, jamais tu n'appelles ta fonction.

Anonyme

6 juin 2009 à 10:49:00

Ok je savais pas qu'on ne pouvais pas mettre qu'un numéro dans les id, et avec ton code sa ne fonctionne pas toujours

Tillertan

6 juin 2009 à 11:41:30

Citation : Tiller

Ensuite dans le code que tu nous montres, jamais tu n'appelles ta fonction.

Anonyme

6 juin 2009 à 11:48:23

multiclass ? Je ne sais ou la placé en HTML...

Tillertan

6 juin 2009 à 13:25:07

bah si j'ai bien suivi, tu fais:
<a href="/" id="lien0" onclick="multiClass(0); return false;">

Anonyme

6 juin 2009 à 13:38:03

Euh... j'ai mis sa, sa passe en active pendant - d'1 seconde est ensuite sa retourne sur le premier.

Tillertan

6 juin 2009 à 16:12:18

Sérieux faudrait voir la page online la.. j'arrive pas a imaginer

Golmote

7 juin 2009 à 22:16:01

Mais quand tu changes de page (réellement, j'entends. Pas un simple toggle d'affichage JS)... ton JS est réinitialisé hein...

Donc c'est à PHP de surligner l'onglet... ?

Anonyme

9 juin 2009 à 20:09:56

Bonsoirs,

J'ai réussi à faire marcher le système mais les liens dans les onglets ou dans les sous menu ne fonctionne pas

. Donc sa change bien de class inactive vers active mais sa ne charge pas la page...

<div id="onglet">
        <ul>
                <li id="lien0" class="active" onclick="multiClass(0); return false;"><a href="/"><span>Accueil</span></a></li>
        </ul>
</div>
<div id="nav">
        <div id="menu0" onclick="multiClass(0); return false;" class="on">
        </div>
</div>

Tillertan

9 juin 2009 à 20:32:58

Citation : Tiller

Sérieux faudrait voir la page online la.. j'arrive pas a imaginer

Anonyme

9 juin 2009 à 20:58:57

Voilà ici.

Tillertan

9 juin 2009 à 21:05:31

Bah, là lorsque tu cliques, tu annules l'action du lien, donc la page ne charge pas.

Trois possibilité:
1. Tu conserves le lien et tu traites a chaque chargement l'affichage du bon onglet en haut en php
2. Comme le 1 mais avec du JS
3. Tu charges le contenu dynamiquement par ajax

Anonyme

9 juin 2009 à 21:15:00

Je préfère par JS mais je vois pas comment...

Tillertan

9 juin 2009 à 21:21:51

Il te faudrait récupérer l'adresse de la page en cours (window.location.href) comparé aux pages (tu fais un objet contenant page <=> onglet) et tu "ouvres" le bon onglet en JS
Et le tout au chargement de la fenêtre (window.onload = function() { }; )

Anonyme

9 juin 2009 à 21:37:40

je modifie mon code ou j'en fais un new ?

Tillertan

9 juin 2009 à 21:41:49

Nouveau en gros:

Un objet avec les urls <=> les ids
La fonction window.onload qui fait:
- Récupère la page en cours
- Regarde si le page existe dans l'objet précédent
- > Si elle existe, on applique ta 1ere fonction sur l'id correspondante
- > Sinon on prend un onglet par défaut, ou aucun

Anonyme

9 juin 2009 à 22:51:27

Comme sa... :euh:

FuncOL = new Array(); 
function StkFunc(Obj) 
{ 
        FuncOL[FuncOL.length] = Obj; 
}

window.onload = function() 
{ 
        for(i=0; i<FuncOL.length; i++) 
        {
                FuncOL[i]();
        } 
}

Tillertan

10 juin 2009 à 12:51:30

Essaie ça:

var pages = {
	"default": 0,
	"animes/": 1,
	"filmsoavs/": 2
};

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);
};

Anonyme

10 juin 2009 à 12:56:12

Ok, mais sa donne quoi sur les liens... sa change pas ?

Tillertan

10 juin 2009 à 13:05:26

euh non

Anonyme

10 juin 2009 à 13:13:30

Donc la c'est presque sa, les liens des sous menu fonctionne mais pas ce des onglets, donc les pages ne se charge pas.

Tillertan

10 juin 2009 à 13:20:39

Jarte les onclicks sur les liens

Anonyme

10 juin 2009 à 13:27:35

C'est fais mais l'onglet passe plus en active est son sous menu apparait pas...

Tillertan

10 juin 2009 à 13:32:06

"animes/": 1,

=>

"animes.php": 1,

Anonyme

10 juin 2009 à 13:48:15

Euh... en ligne sa marche en local sa foire

1 2 >>