[RESOLU]Modifier la mise en forme selon onClick

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [RESOLU]Modifier la mise en forme selon onClick

FalleN-

Bonjour à tous,

(D'abord, veuillez m'excuser pour le titre peu explicite du topic mais j'ai vraiment eu du mal à en trouver un qui pouvait décrire correctement mon problème.)

J'ai un code javascript qui permet aux visiteurs d'afficher ou de cacher le contenu d'une div.
J'ai donc 3 liens qui se présente comme ceci

Afficher div 1 - Afficher div 2 - Afficher div 3

Lorsque je clique sur "Afficher div1", j'ai le contenu de cette div qui s'affiche,et si je clique juste apres sur "Afficher div 2", j'ai la div 1 qui se cache et la div 2 qui s'affiche , et ainsi de suite.

Cependant, j'aimerais faire en sorte que lorsque l'on clique sur "Afficher div 1", cette phrase se mette en gras pour signaler au visiteur quel div il est en train de visionner et si on clique juste après sur "Afficher div 2", le "Afficher div1" redeviendra en écriture normal et c'est le "Afficher div2" qui se mettra en gras.

Je ne sais pas si j'ai été bien compris, je vous donne la syntaxe de mon code pour que vous puissiez m'aider:

Mon code javascript dans le HEAD :

Code :

<script type="text/javascript">
function switchDiv(n) {
var id;
var hide = 0;
switch(n) {
case 1 : id = "site"; break;
case 2 : id = "logo"; break;
case 3 : id = "design"; break;
}
if ( document.getElementById(id).style.display == "block" ) hide = 1;
document.getElementById('site').style.display = "none";
document.getElementById('logo').style.display = "none";
document.getElementById('design').style.display = "none";
if ( hide != 1 ) document.getElementById(id).style.display = "block";
}
</script>

Mon code dans le <body> permettant d'afficher les divs:

Code :

<span onClick ="switchDiv(1);">SITES</span>
<div style="display:none;" id="site">
Contenu de ma div site....
</div>
<span onClick ="switchDiv(2); "> LOGOS </span>
<div style="display:none;" id="logo">
Contenu de ma div logo....
</div>
<span onClick ="switchDiv(3);"> DESIGNS </span>
<div style="display:none;" id="design">
Contenu de ma div design....
</div>

Je vous remercie par avance de l'aide que vous pourrez m'apporter

Bonne journée !

Message édité par FalleN- le 23-10-2009 à 17:08:12

Publicité

FalleN-

Ayant posté sur un autre forum, un internaute m'a déjà répondu et j'ai donc trouvé la solution à mon problème , je vous la donne ici :

"Dans tes onclick tu mets :

switchDiv(x, this);

Et coté Javascript :

Code :

var lastOpen = false;
function switchDiv(n, tx) {
var swit = {
1: 'site',
2: 'logo',
3: 'design'
}, id = swit[n], ob = document.getElementById(id);
ob.style.display = ob.style.display == 'block' ? 'none' : 'block';
for (var i in swit) {
if (i != n) {
document.getElementById(swit[i]).style.display = 'none';
}
}
if (lastOpen) {
lastOpen.style.fontWeight = 'normal';
}
tx.style.fontWeight = 'bold';
lastOpen = tx;
}

Message édité par FalleN- le 23-10-2009 à 17:24:01

pataluc

perso je partirai sur qqchose du genre:

Code :

cript type="text/javascript">
function switchDiv(s, n) {
s.style.fontWeight='bold';
var id;
var hide = 0;
switch(n) {
case 1 : id = "site"; break;
case 2 : id = "logo"; break;
case 3 : id = "design"; break;
}
if ( document.getElementById(id).style.display == "block" ) hide = 1;
document.getElementById('site').style.display = "none";
document.getElementById('logo').style.display = "none";
document.getElementById('design').style.display = "none";
if ( hide != 1 ) document.getElementById(id).style.display = "block";
}
</script>

Code :

<span onClick ="switchDiv(this, 1);">SITES</span>
<div style="display:none;" id="site">
Contenu de ma div site....
</div>
<span onClick ="switchDiv(this, 2); "> LOGOS </span>
<div style="display:none;" id="logo">
Contenu de ma div logo....
</div>
<span onClick ="switchDiv(this, 3);"> DESIGNS </span>
<div style="display:none;" id="design">
Contenu de ma div design....
</div>

bon après il faut remettre les autres à normal...

par contre perso je te conseille un framework comme jquery qui peut bien te faciliter la tache pour ce genre de manip'.

et accessoirement, une question: pourquoi fait tu un case sur ton paramètre 1, 2 ou 3 au lieu de passer directemetn "sites", "logos" ou "designs" ??

EDIT: Grillaid [:benou_grilled] mais au moins on est d'accord.

Message édité par pataluc le 23-10-2009 à 17:10:08

FalleN-

Merci tout de même de ta réponse Pataluc.

Concernant le framework jquery, il est évident que j'aurais préféré utiliser ce genre de méthode car elle est bien plus ergonomique et bien plus pratique que les veilles div css..

Le problème est que j'ai déjà voulu me plancher dessus et je n'y arrive vraiment pas à l'appliquer sur mes codes. A chaque fois sa plante , a chaque fois il y a des bugs.. C'est dommage que je n'arrive pas à l'utiliser en tout cas

FORUM HardWare.fr

Programmation

HTML/CSS

[RESOLU]Modifier la mise en forme selon onClick

Sujets relatifs
html / javascript / onclick	[Résolu] JBoss et Virtual Host
Problème:boite de dialogue alert() avec chrome+safari - [Résolu]	[php/mysql] lancer un programme php en cas d'updates de MySql [resolu]
Variables d'environnement en batch	Modifier le texte d'une msgbox
[resolu] Formulaire avec upload qui renomme mon fichier	[Résolu] Fermeture inopiné application Delphi
[Résolu] Problème background	[résolu] Outils de reformatage de code
Plus de sujets relatifs à : [RESOLU]Modifier la mise en forme selon onClick

Page générée en 0.058 secondes