High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Afficher le contenu d une div grace a id=

Dernière réponse le 31 jui 2007 à 15:28:00 kahilesgi, le 30 jui 2007 à 15:10:20 
 Signaler ce message aux modérateurs

Bonjour
voila je suis toujours sur le meme probleme et jarrive pas a la resoudre
jai un code qui me permet en appuyant sur un bouton d aficher un element et d en cacher un autre
jaimerais donc mettre
mes boutons dans un tableaux sur ma page et mon contenu dans un autre tableaux
et faire le meme effet!
c est a dire en appuyant sur un bouton il maffiche dans le tableaux a coter
l element1 correspondant et cache l element 2
et vice versa
voici mon code



<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<script src="prototype.js"></script>
<script language="JavaScript">
function affichage(eltAafficher, eltAcacher)
{
var eltAfficher = document.getElementById(eltAafficher);
eltAfficher.style.visibility="visible";
var eltAcacher = document.getElementById(eltAcacher);
eltAcacher.style.visibility="hidden";
}
</script>
</head>
<body>


<div id="courant" class="focus" ; position:absolute; visibility:hidden;">
aaaaa
</div>
<div id="titre" class="cache" ; position:absolute; visibility:hidden;">
bbbbbbbb
</div>
<input type="button" value="compte1" onclick="affichage('courant', 'titre');">
<input type="button" value="compte2" onclick="affichage('titre','courant');">
<body>
</html>

Configuration: Windows XP
Firefox 2.0.0.5

Posez votre question Répondre

1

Alain42, le 30 jui 2007 à 15:42:01

Essayes en supprimant: visibility:hidden dans :

<body>


<div id="courant" class="focus" ; position:absolute; visibility:hidden;">
aaaaa
</div>
<div id="titre" class="cache" ; position:absolute; visibility:hidden;">
bbbbbbbb
</div>
<input type="button" value="compte1" onclick="affichage('courant', 'titre');">
<input type="button" value="compte2" onclick="affichage('titre','courant');">
<body>

et dans la balise <Body tu mets un appel de fonction onLoad=masquer('courant','titre');

et tu fais une fonction masquer(....

qui va te mettre par des getElementsById tes deux div 'hidden'

Sino il me semble qu'il te manque des guillemets dans la ligne
<ital><body>


<div id="courant" class="focus" ;" position:absolute; visibility:hidden;">

   
Répondre à Alain42

2

kahilesgi, le 30 jui 2007 à 15:47:59

Escuse moi tu peux m expliquer plus clairement jsuis vraiment debutant de chez debutant
tu vois je voudrais mettre mes bouton d un cote et mes div de lautre
et quand je clique sur un bouton il mafiche le contenu de ma div

   
Répondre à kahilesgi

3

Alain42, le 30 jui 2007 à 15:58:59
  • +1

// tu remets ta fonction affichage(eltAafficher, eltAcacher) .......

et
//fonction masquer au chargement
function Masquer(elt1, elt2)
{
var eltAcacher1 = document.getElementById(elt1);
eltAcacher1.style.visibility="hidden";
var eltAcacher2 = document.getElementById(elt2);
eltAcacher2.style.visibility="hidden";
}

</script>

<body onLoad="Masquer('courant', 'titre');"'>

<div id="courant" class="focus" ;" position:absolute;;">
aaaaa
</div>
<div id="titre" class="cache" ;" position:absolute; "">
bbbbbbbb
</div>
<input type="button" value="compte1" onclick="affichage('courant', 'titre');">
<input type="button" value="compte2" onclick="affichage('titre','courant');">
<body>

   
Répondre à Alain42

4

kahilesgi, le 30 jui 2007 à 17:17:08
  • +1

Jai essayer de metre les bouttons d un coter et les div de l autre
et jai insere des alert entre chaque var pour voir si mon code marche
si je separer le boutton de lafichage c est parceque je travaille sur des ,module
et jaimerais que quand je clike sur un bouton il mapelle les contenu de la div
voila comment jai fait ca
dans mon module bouton jai mit! 

<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<script src="prototype.js"></script>
<script language="JavaScript">
function affichage(eltAafficher, eltAcacher)
{
alert('test1');
	var eltAfficher = document.getElementById(eltAafficher);
alert('test2');  
	eltAfficher.style.visibility="visible";
alert('test3');  
	var eltcacher = document.getElementById(eltAcacher);
alert('test4');  
	eltcacher.style.visibility="hidden";
alert('test5');

}
</script>
</head>
<body>



<input type="button" value="compte1" onclick="affichage('courant', 'titre');">
<input type="button" value="compte2" onclick="affichage('titre','courant');">
<body>
</html>





et dans mon module afichage jai mis 

<html>

<body>


<div id="courant" class="focus">
aaaaa
</div>
<div id="titre" class="cache">
bbbbbbbb
</div>

<body>
</html>



et voila ce que je voudrais faire
quand je clique sur un bouton il aille mafiche le contenu mais c marche pas
quand j execute il me met test1
test2
c tout il ne continu pas et il saute la fonction eltAfficher!

   
Répondre à kahilesgi

5

Alain42, le 30 jui 2007 à 17:54:23

Pour visualiser et tester ce qui se passe il vaudrait mieux faire: 

function affichage(eltAafficher, eltAcacher)
{

	var eltAfficher = document.getElementById(eltAafficher);
alert("test1: "+eltAfficher.style.visibility);
 
	eltAfficher.style.visibility="visible";
alert("test2: "+eltAfficher.style.visibility);
 
 
	var eltcacher = document.getElementById(eltAcacher);
alert("test3: "+eltcacher.style.visibility);

	eltcacher.style.visibility="hidden";
alert("test4: "+eltcacher.style.visibility);

}


tu verra ainsi si ta commande JS est efficace et si ta ligne entre test1 et 2 s'éxécute bien.

Je vois que tu as fireFox alors utilises la console d'erreur pour voir si tu n'as pas des bugs dans ton script JS

   
Répondre à Alain42

6

kahilesgi, le 31 jui 2007 à 10:27:11

En fait on ma di que ca marche pas parceke c est des frames?
tu peux mexpliquer ca veut dire quoi au juste?

   
Répondre à kahilesgi

7

 Alain42, le 31 jui 2007 à 15:28:00

Les div ne sont pas des frames.


Moi j'avais remarqué que certains navigateurs, lorsque les éléments d'un div étaient "masqués" (visiblity:hidden) dans la page html (c a d comme tu as fait), la fonction Javascript ne réaffichait pas ces éléments. C'est pourquoi plus haut je t'ai suggéré de charger ta page sans masquer puis de masquer par une fonction JS au chargement (onLoad dans la balise <body)

Mais tu ne m'as pas dit si tu avait éssayé et si ça marchait.

Utilises aussi la console d'erreur de Firefox.

Dis moi aussi ce que donne les alert dont je t'ai donné la methode ci dessus.

   
Répondre à Alain42
Posez votre question Répondre
Ils ont besoin de votre aide