Afficher successivement divers DIV [Résolu]

[KosenHitatchi]

Bonjour tout le monde.

J'ai un petit soucis pour cacher certain div préalablement affiché.
L’idée est d'afficher une div correspondant a un lien sur un menu, et de masquer celle préalablement affiché.

Pour recuperer toute mes DIV (class="newsbox") contenues dans la DIV (id="news"), j'utilise:

Code :

document.getElementsByClassName('newsbox','news')

Par contre quand je veux modifier le style de toute ces balise, je n'ai aucun resultat. Le code fonctionne pour afficher mes DIV, par contre pas pour les masquer.

Voici le code:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
function show(id)
			{
				if(undefined!= elm)
					{
					/* How to check if elm is undefined or not */
                                        /* Reset de toute les Class "newsbox" contenus dans id "news" a display ='none' */
			                document.getElementsByClassName('newsbox','news').style.display ='none';
 
					}
				var elm=document.getElementById(id);
				elm.style.display = "inline-block";
			}

Merci pour votre aide


Kosen

[Bovino]

Code :

document.getElementsByClassName('newsbox','news')

Cette syntaxe n'existe pas...

Code :

document.getElementById('news').getElementsByClassName('newsbox');

Code :

document.getElementsByClassName('newsbox','news').style.display ='none';

getElementsByClassName(), comme le s de elements l'indique, renvoie une collection. C'est quoi la propriété style d'une collection ?
Il faut faire une boucle sur les éléments pour leur affecter le style individuellement.

[SpaceFrog]

et encore ...getElementsByClassName ne fonctionne que sur les navigateurs récents.

[KosenHitatchi]

Merci pour vos reponsses.

Je teste ces nouveaux éléments tout de suite. ^^

et encore ...getElementsByClassName ne fonctionne que sur les navigateurs récents.

A l'exeption d'IE, toute les navigateur l'on implémenté depuis biens trois-quatre versions.
caniuse.com

[KosenHitatchi]

Ok a l'instar d'utiliser:

Code :

document.getElementsByClassName('newsbox','news')

Et t'il possible d'utiliser:

Code :

document.getElementById('news').getElementsByClassName('newsbox').style.display ='none';

@Bonivio
Tu me parlais d'une boucle, comment la construit tu pour juste modifier les class='newsbox', dans l'id='news'.

Merci

[SpaceFrog]

non getElementsByName retourne une collection
la collection n'a pas de propriété style
Et la propriété style n'est pas distribuée aux éléments de la collection.

il faut donc boucler sure les elements de la collection pour appliquer individuellement le style.

Sinon regarde du coté de JQuery qui à lui intégré la distributivité a chacun des elements de la collection retournée par les selecteurs

Code :

$('#news .newsbox').css({"display":"none"});

[KosenHitatchi]

J'ai pas particulierement le desir d'utiliser une librairie pour ce probleme.

Ton code de sur planet-languages me plait bien.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function changeOnglet(Num)
{
for (i=1; i<7; i++)
  {
   if(i!=Num){   			
   				 document.getElementById('Ong'+i).style.display='none';
   				 document.getElementById('Lang'+i).className='OnBack';
 
               }
   else       {             
				 document.getElementById('Ong'+i).style.display='block';
				 document.getElementById('Lang'+i).className='OnFront';
				 }               
   }
}

Par contre, a la place de renseigner le nombre de DIV y a t'il une possibilitée, de trouver leur nombre automatiquement, un truc du genre :

Code :

lenght(document.getElementById('news').getElementsByClassName('newsbox'))

Merci

[SpaceFrog]

Code :

document.getElementById('news').getElementsByClassName('newsbox').length

[KosenHitatchi]

Enfin une derniere question.

Quelle est le commande pour recuperer une classe particuliere dans cette colection.

Par exemple comment faire pour recuperer la seconde class='newsbox' dans id='news'.

Est-ce :

Code :

document.getElementById('news').getElementsByClassName('newsbox').2

Merci

[SpaceFrog]

Code :

document.getElementById('news').getElementsByClassName('newsbox')[1]

une collection en js commence à l'indexe 0
le second element à pour indice 1

[KosenHitatchi]

Ok merci.
Je vais tester tout ça et je vous tient au jus. ^^

[KosenHitatchi]

Une petite autre question.

Quelle est la commande pour récupérer la position d'une DIV (class='newsbox' id='sport') dans la collection

Code :

document.getElementById('news').getElementsByClassName('newsbox')

Par exemple DIV (class='newsbox' id='sport') dois me retourner 2 (sport= troisieme position dans ma liste). ^^

Je sais je dire le bousin par les cheveux, mais bon

Merci

[SpaceFrog]

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script type="text/javascript">
function getIndex(objid, objclass){
tabobj=document.getElementsByClassName(objclass);
var i=-1;
while(tabobj[++i]){
if(tabobj[i].id===objid){return i;}
}
}
</script>
</head>
 
<body onload="alert(getIndex('foo3','bar'))">
<input id="foo1" class="bar" />
<input id="foo2" class="bar" />
<input id="foo3" class="bar" />
<input id="foo4" class="bar" />
<input id="foo5" class="bar" />
<input id="foo6" class="bar" />
</body>

[KosenHitatchi]

Merci tout fonctionne.
Je passe en résolut.