Affichage de div en fondu

**lithiumsound** · 10/04/2012, 11h37

Bonjour,

J'ai commencé a bidouiller ce petit bout de page web utilisant JS, CSS & HTML.
Tout marche comme il faut pour l'instant quand je clic sur les boutons show, le texte s'affiche en fondu, disparaît quand je clic sur un autre bouton show et affiche le nouveau texte.

Le problème arrive quand j'essais de remplacer les p1,p2,p3 & b (c'est moche je sais [lol]) par des divs, plus rien ne marche.

-soit les divs s'affichent malgré le display none,
-soit les divs s'affichent et reviennent vers la précédente,
-soit les boutons show ne marchent plus...

Voici le code, c'est un gros brouillon mais c'est celui qui marche le mieux pour moi (chrome) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
  <style>
        p1, p2, p3{font-size:150%; cursor:pointer;}
        b2, b3{display:none; }
        b1, b2, b3{position:absolute; margin:200px 0 0 500px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
			<p1>Show1</p1> 
			<p2>Show2</p2>
			<p3>Show3</p3>
 
			<br><br><br><br>
 
			<b1>display menu 1</b1>
			<b2>display menu 2</b2>
			<b3>display menu 3</b3>
 
	<script>
                $("p1").click(function () {
                $("b1").fadeIn("slow");
                $("b2").fadeOut("slow");
                $("b3").fadeOut("slow");
                });
                
                $("p2").click(function () {
                $("b1").fadeOut("slow");
                $("b2").fadeIn("slow");
                $("b3").fadeOut("slow");
                });
 
                $("p3").click(function () {
                $("b1").fadeOut("slow");
                $("b2").fadeOut("slow");
                $("b3").fadeIn("slow");
                });
        </script>
 
</body>
</html>

**NoSmoking** · 10/04/2012, 21h53

Bonsoir,

J'ai commencé a bidouiller ce petit bout de page web

c'est le moins que l'on puisse dire

Les balises p1, p2 et autres n'existent pas donc à bannir autant que faire ce peut.

Remplaces simplement ces balises par des DIVs ayant pour ID p1, p2 et autres...

Cela te donneras

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
  <style>
  #p1, #p2, #p3{font-size:150%; cursor:pointer;}
  #b2, #b3{display:none; }
  #b1, #b2, #b3{position:absolute; margin:200px 0 0 500px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
      <div id="p1">Show1</div>
      <div id="p2">Show2</div>
      <div id="p3">Show3</div>
      <br><br><br><br>
      <div id="b1">display menu 1</div>
      <div id="b2">display menu 2</div>
      <div id="b3">display menu 3</div>
  <script>
    $("#p1").click(function () {
      $("#b1").fadeIn("slow");
      $("#b2").fadeOut("slow");
      $("#b3").fadeOut("slow");
    });
    $("#p2").click(function () {
      $("#b1").fadeOut("slow");
      $("#b2").fadeIn("slow");
      $("#b3").fadeOut("slow");
    });
    $("#p3").click(function () {
      $("#b1").fadeOut("slow");
      $("#b2").fadeOut("slow");
      $("#b3").fadeIn("slow");
    });
  </script>
</body>
</html>

Affichage de div en fondu

jQuery

Discussions similaires

Partager

Partager