Bonjour à tous,
Je suis en train de préparer une application django a des fins personnels, et je suis en train d'élaborer ma page de base.
Du coup j'ai trouvé un dropdown menu qui me convient :
Du coup j'essaye de faire en sorte que lorsque je clique sur Link1 çà n'affiche que la div avec l'id "Toto".
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 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#Toto" onclick="DisplayContent(this)">Link 1</a> <a href="#Toto2" onclick="DisplayContent(this)">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <div id="content"> <div id="Toto"> <p> Kikou c la div toto </p> </div> <div id="Toto2"> <p> Kikou c la div toto2 </p> </div> </div> </body> </html>
Pour cela j'ai mis en place :
ce css (en plus du css pour le menu):
Code CSS : 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 body { font-family: Arial, Helvetica, sans-serif; } .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } #content div{ display: none; }
et j'ai ajouté ce code javascript :
Çà fonctionne presque bien.. le souci : quand je clique sur Link2 puis sur Link1 j'ai la div Toto2 qui reste affichée ...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 <script> function DisplayContent(e){ let id = e.getAttribute('href').replace('#','') if (document.getElementById(id).style.display == "none"){ document.getElementById(id).style.display = "block"; }else{ document.getElementById(id).style.display = "none"; } } </script>
Auriez quelques idées pour éviter cela ?
En vous remerciant d'avance.
Cordialement.
Partager