Changement de couleur en JS sur un éléments d'une liste bootstrap

**pyrocats** · 01/10/2019, 10h37

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 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
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 CSS :

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

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

Invité · 01/10/2019, 12h18

Bonjour,

au plus simple :

Code html :

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

1
2
3
4
5
6
<div class="list-group">
  <a id="v1e" href="#" class="list-group-item list-group-item-action" onclick="changeColor(this);">QAH 519</a>
  <a id="v2e" href="#" class="list-group-item list-group-item-action" onclick="changeColor(this);">RLR 502</a>
  <a id="v3e" href="#" class="list-group-item list-group-item-action" onclick="changeColor(this);">ZUW 937</a>
  <a id="v4e" href="#" class="list-group-item list-group-item-action" onclick="changeColor(this);">RCO 087</a>
</div>

Code css :

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

1
2
3
4
5
6
.list-group > a { 
  background-color:#fff; 
}
.list-group > a.active { 
  background-color:red; 
}

Code :

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

1
2
3
function changeColor( elt ){
  elt.classList.toggle('active');
}

**pyrocats** · 01/10/2019, 13h38

Merci beaucoup, c'est presque ce que je voulais, j'avais complètement oublier les "active" dans le css qui sont bien pratique !

Cependant, j'ai une autre petite question, est-ce compliqué de faire en sorte de garder la valeur même si on sort de la page ?
En faite que sa reste rouge tant que l'on re-appuie pas sur la case

Encore merci beaucoup.

**SpaceFrog** · 01/10/2019, 13h54

JS ne survit pas à un rechargement de page
Il faut donc utiliser quelque chose qui y survit comme des cookies, du local storage ou le passage de paramètres dans l'url
ou des sessions coté serveur ...

**pyrocats** · 01/10/2019, 14h08

D'accord merci beaucoup pour votre aide à tout les deux, je peux donc marquer le sujet en résolu !!

Changement de couleur en JS sur un éléments d'une liste bootstrap

JavaScript

Vue hybride

Discussions similaires

Partager

Partager