Class.Name Javascript sur liste dynamique?

[tryan]

Bonjour,

Je bute sur un menu à onglet dynamique et notamment dans sur la fonction Javascript qui permet d'identifier le Class.Name :

function affiche(num){
    // Début de la numérotation
	var i = 1; 
	// Nom de l'id
	var NomId = 'ouvre-'; 
	var MonDiv;
	// On boucle et on masque tout
	while(( 
	MonDiv = document.getElementById( NomId + (i++)))){
	MonDiv.style.display = 'none';
	}
	//On affiche l'élément concerné
	MonDiv = document.getElementById( NomId + num);
	MonDiv.style.display = 'block';
}

....
<li><a onclick="affiche(1);">teste</a></li>
<li><a onclick="affiche(2);">teste 2</a></li>
....

Je souhaites tout simplement que le "li" cliqué applique une class css qui indique que l'on se trouve sur ce "li" ... mais là, je sèche...
Une idée ?
Merci

 

[forty]

essaye avec this.parentNode pour récupérer le parent du lien. Il faut peut-être passer en paramètre "this" avec affiche(this, 1).

 

[tryan]

Merci pour ta réponse forty mais je dois avoué être une "burne" en JS alors ce que tu me dis est du chinois . J'ai lus sur le net à quoi servait "parentNode" mais de la à le mettre en application...

 

[spout]

Si t'es une burne en JS, pourquoi réinventer la roue ? http://jqueryui.com/demos/tabs/

 

[tryan]

Parce que j'aime la simplicité!
Parce que j'aime bien comprendre un minimum ce que j'utilise!
Parce que je préfère avoir 15 lignes de code qui me soit utiles plutôt que 9000!

 

[spout]

Bon ben exemple avec le parentNode suggéré par forty: http://jsbin.com/ihonid/edit#source

 

[tryan]

Merci pour le lien .

Je commence à comprendre doucement le truc...j'arrive pour le moment à changer la class css du "li" cliqué mais je ne parviens pas à faire en sorte qu'un seul élément affiche la dite class. Si je clique sur 2 "li" successivement, les 2 "li" garde la class css active au lieu d'un seul...

function affiche(element, num){
    // Début de la numérotation
	var i = 1; 
	// Nom de l'id
	var NomId = 'ouvre-'; 
	var MonDiv;
	//Pour changer la class css
	var changeclass;
	//-------
	// On boucle
	while( 
	MonDiv = document.getElementById( NomId + (i++))
	//Fin boucle while
	)
	{
	//on masque tout
	MonDiv.style.display = 'none';
	}
	//On affiche l'élément concerné
	MonDiv = document.getElementById( NomId + num);
	MonDiv.style.display = 'block';
//--------------------------------------------------
   alert("L'élément actuel est : " + element.parentNode.className);
	changeclass = ( NomId + num);
	alert("L'élement est maintenant égal à \"changeclass\" :" + changeclass);
	if(element.parentNode.className == changeclass)
{
	element.parentNode.className="active";
    alert("l'élément parent passe à : " + element.parentNode.className);
}

//---------------------------------------------------
}

Une suggestion?

 

[zeb]

J'ai pas dépouillé tout ton code mais si tu arrive a changer la class de la "li" active il faut que tu ajoute juste avant cela une itération qui met toutes les "li" a une class inactive.

dans l'ordre tu dé-sélectionne tout et tu sélectionne ensuite.

 

[tryan]

Tu n'aurais pas un exemple sous le coude parce plus ça va, plus je déprime ^^...

 

[zeb]

Sans tenir compte du CSS lié aux différentes boxs que les onglets contrôlent et juste pour le principe en simplifiant au max ton code JavaScript et en restant dans l'idée de tes conventions de nommage :

<div id="onglets">
<ul>
	<li class="inactif" id="onglet-1"><a onclick="affiche(1);">teste 1</a></li>
	<li class="inactif" id="onglet-2"><a onclick="affiche(2);">teste 2</a></li>
	<li class="inactif" id="onglet-3"><a onclick="affiche(3);">teste 3</a></li>
	<li class="inactif" id="onglet-4"><a onclick="affiche(4);">teste 4</a></li>
</ul>
</div>
<div id="ouvre-1">1</div>
<div id="ouvre-2">2</div>
<div id="ouvre-3">3</div>
<div id="ouvre-4">4</div>

<script type="text/javascript">
	affiche(1); // initialisation
	
	function affiche(num){
	   // On boucle et on masque tout
	   for(i=1;i<5;i++){
			document.getElementById( 'ouvre-' + i).style.display = 'none';
			document.getElementById('onglet-' + i).className = "inactif";
	   }
	   //On affiche l'élément concerné
	   document.getElementById( 'ouvre-' + num).style.display = 'block';;
	   document.getElementById('onglet-' + num).className = "actif";
	}
</script>

<style type="text/css">
.inactif{
	background-color: red;
}
.actif{
	background-color: blue;
}
</style>

 

[tryan]

Merci zeb pour cet exemple . Je dois avoué être un peut dégoûté par la "simplicité" de celui-ci alors que je m'arrache les tifs avec des "element.parentNode.className" et Cie :x .

Bon, je vais tenté d'arranger ton code avec une boucle while() si c'est c'est possible...

Note : je hais le JS

Encore merci

 

[zeb]

la "simplicité" de celui-ci

Tu peux aussi charger mootols, JQuery et j'en passe mais ça donnera pas plus simple. Mais si tu veux des effets "smart" c'est plus chiant.
Je voie a ton avatar qu'il te reste quelques cheveux tout va bien alors ;-)

 

[tryan]

Je voie a ton avatar qu'il te reste quelques cheveux tout va bien alors ;-)

C'est pas certains :mrgreen: .
La j'essaye d'adapter ton code au mien en utilisant une boucle while afin d'ajouter autant de "li" que je veux sans être obligé de retoucher à la fonction à chaque ajout et je crois que je vais allé chercher une corde .

Pour ce qui est de jquery et compagnie, je sais que c'est plus simple à mettre en place mais je ne vois pas l'utilité d'avoir une tonne de ligne de js alors que quelques une peuvent être largement suffisant.

 

[spout]

Pour ce qui est de jquery et compagnie, je sais que c'est plus simple à mettre en place mais je ne vois pas l'utilité d'avoir une tonne de ligne de js alors que quelques une peuvent être largement suffisant.

- Simplicité (Write Less, Do More)
- Compatibilité accrue entre les différents navigateurs
- C'est vrai que c'est pas rien à embarquer, mais avec les CDN c'est nettement réduit.
- Communauté: rapports de bugs, support, plugins à la pelle, ...
- ...

Je n'avais jamais fait de JS (hors copier/coller :mrgreen avant de découvrir jQuery / scriptaculous / mootools, jQuery m'a séduit et a ouvert bien des horizons de par sa simplicité d'utilisation.
Alors pr un bidouilleur comme toi (c'est pas péjoratif), je t'assure ça vaut le détour

 

[zeb]

Alors pr un bidouilleur comme toi (c'est pas péjoratif), je t'assure ça vaut le détour

Je savais que ça allait te faire réagir Spout.
C'est d'ailleurs pour ça que j'ai ajouté que si l'objectif était d'avoir des effets "smart" le JavaScript à la mano ne suffisait pas.

Pour le bidouilleur, je le prend surtout comme un compliment, la passion du code qui m'écarte des frameworks est en effet du a cette passion du code donc c'est pas du tout péjoratif pour moi :wink:

Le seul truc qui me saoule et qui m'a toujours fait désinstaller les framework javascript c'est le poids des pages pour "juste un effet", mais il n'en reste pas moins que si un site complet a besoins d'effet de qualité ce genre d'outil s'avère un must c'est évident.
mais bon c'est surement viscéral chez moi j'étais encore cet aprem en train de réfléchir pour virer sur un site une API JavaScript gérant des time line pourtant très bien foutues. Bref on ne se refait pas.

 

[tryan]

@spout : pour la "simplicité d'utilisation", faut quand même sacrément avoir le nez dedans jusqu'aux chevilles.
Quand je vois :

<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
	</script>

...ça ne m'inspire pas beaucoup et encore moins quand je regarde le fichier "jquery" pour comprendre comment ça fonctionne.

Ceci dit, je suis certains que tu as raison sur ce que tu dis mais en plus des raisons citées plus haut, comme je ne comprend pas, je n'utilise pas.

 

[zeb]

arf ! j'ai fait le boulet j'ai pas vue que tu parlais a Tryan ...