Désafficher-afficher en jQuery

**Znojmo** · 29/05/2013, 00h55

Bonjour tout le monde,

J'essaie de faire un site où on peut afficher un chapitre d'un texte en cliquant sur la section correspondante à gauche, et j'aurais besoin d'utiliser une fonction désafficher (classe) pour désafficher tous les éléments d'une classe, puis une fonction afficher(id) pour afficher un id en particulier. J'avais essayé avec Javascript et ça marchait très bien, mais j'avais besoin de la fonction GetElementbyClassName qui n'est pas pris en charge par les anciennes versions d'IE.

J'essaie donc de convertir ça en jQuery. J'ai simplifié ma page au maximum pour que vous puissiez comprendre assez rapidement, alors si quelqu'un peut y jeter un coup d'œil et me dire ce qui ne fonctionne pas dessus, j'aimerais bien.

En gros, quand on clique sur les noms des sous-chapitres à gauche, ça devrait faire disparaître tous les noms à droite et apparaître seulement celui sur lequel on a cliqué (si je clique sur 1.1.1 à gauche, le 1.1.2 et 1.1.3 s'enlèvent à droite). Je sais qu'il n'y a pas de lien href mais j'ai fait exactement la même chose en Javascript, et ça fonctionnait alors je suppose que ce n'est pas ça le problème.

Quelqu'un voit mon erreur?

Code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
 
<head>
 
 
<script src="http://code.jquery.com/jquery-1.4.2.min.js">
$(document).ready(
  function desafficher(classe) {
   $("."+classe).hide();
  }
  function afficher(id) {
    $("#"+id).show();
  }
});
</script>
 
 
</head>
 
<body>
 
 
<div id="boutons" style="position:absolute; left:20px;">
 
 
<div id="sec1">
<a onclick="desafficher('sec');afficher('1.1.1');">1.1.1</a>
</div>
 
<div id="sec2">
<a onclick="desafficher('sec');afficher('1.1.2');">1.1.2</a>
</div>
 
<div id="sec3">
<a onclick="desafficher('sec');afficher('1.1.3');">1.1.3</a>
</div>
 
 
 
</div>
 
 
 
 
 
<div id="texte" style="position:absolute; left:80px;">
 
 
 
<div id="1.1.1" class="sec">
1.1.1
</div>
 
<div id="1.1.2" class="sec">
1.1.2
</div>
 
<div id="1.1.3" class="sec">
1.1.3
</div>
 
 
</div>
 
 
 
 
</body>
</html>

Désafficher-afficher en jQuery

jQuery

Mode arborescent

Discussions similaires

Partager

Partager