Changement de couleur en JS sur un éléments d'une liste bootstrap
Bonjour tout le monde,
Voilà j'ai un problème pour faire un changement de background color sur un éléments d'une liste en bootstrap, j'ai essayé pleins de méthode avec des innerHTML, du Javascrpit avec des document.GetelementbyId .
Cependant, rien ne marche :'(
Pouvez-vous m'aider ?!
Voici le code de la page en cours avec mes test :
Code:
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
70
71
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="Forme/lib/bootstrap.min.css">
<link rel="stylesheet" href="Forme/style/acceuil.css">
<link rel="stylesheet" href="Forme/style/vehicule.css">
<title>Serveur voiture</title>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="Acceuil.php" class="thumbnail">
<img src="Forme/img/logolspd.png" width="70" height="70" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Casiers Judiciaires <span class="sr-only">(current)</span></a></li>
<li class="nav-item active"><a class="nav-link" href="intervention.php">Interventions<span class="sr-only">(current)</span></a></li>
<li class="nav-item active"><a class="nav-link" href="vehicule.php">Véhicules<span class="sr-only">(current)</span></a></li>
<li class="nav-item active"><a class="nav-link" href="plainte.php">Plaintes<span class="sr-only">(current)</span></a></li>
<li class="nav-item active"><a class="nav-link" href="codepenal.php">Code Pénal<span class="sr-only">(current)</span></a></li>
</ul>
</div>
</nav>
</head>
<body>
<div class="list-group">
<a id="v1e" href="#" class="list-group-item list-group-item-action" onclick="changeColorv1e();" style="background-color: #ffffff;">QAH 519</a>
<a id="v2e" href="#" class="list-group-item list-group-item-action" onclick="changeColorv2e();" style="background-color: #ffffff;">RLR 502</a>
<a id="v3e" href="#" class="list-group-item list-group-item-action" onclick="changeColorv3e();" style="background-color: #ffffff;">ZUW 937</a>
<a id="v4e" href="#" class="list-group-item list-group-item-action" onclick="changeColorv4e();" style="background-color: #ffffff;">RCO 087</a>
</div>
<script src="Forme/lib/jquery-3.3.1.slim.min.js"></script>
<script src="Forme/lib/bootstrap.min.js"></script>
</body>
</html>
<script language="javascript">
function changeColorv1e(){
var x = document.getElementById("v1e").style.backgroundColor;
if((x == "#ffffff")){
document.getElementById("v1e").style.backgroundColor="red";
}else{
document.getElementById("v1e").style.backgroundColor="#ffffff";
}
x.reload(true);
}
</script> |
Et voici le CSS associé :
Code:
1
2
3
4
5
6
7
8
| .list-group{
width : 80%;
display: flex;
justify-content: center;
margin-left : 10%;
margin-top: 5%;
background-color: #ffffff;
} |
Merci par avance :)
