Bonjour à tous,

J'explique un peu mon problème:

Je suis en train de concevoir un site web pour une association. Le problème est que j'aimerai ajouter la classe "active" à mon id="accueil"

voici le code source de la page contact.php
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
<!DOCTYPE html>
<html>
	<head>
		<title>Groupe St Martin</title>
		<script type="text/javascript" src="http://ff.kis.v2.scr.kaspersky-labs.com/9D08E5B6-4B25-854F-85D0-EA0F1C287313/main.js" charset="UTF-8"></script><script src="http://localhost/js/jquery.js"></script>
<script src="http://localhost/js/bootstrap.bundle.js"></script>
<script src="http://localhost/js/bootstrap.js"></script>
<script src="http://localhost/js/visiteur.js"></script>
<link href="http://localhost/css/bootstrap-grid.css" rel="stylesheet"/>
<link href="http://localhost//css/bootstrap-reboot.css" rel="stylesheet"/>
<link href="http://localhost/css/bootstrap.css" rel="stylesheet"/>
	</head>
	<body>
		<nav id="navigation" class="navbar navbar-expand-lg navbar-light" style=""> <script src="http://localhost/js/visiteur.js"></script>
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" id="accueil">
        <a class="nav-link" href="http://localhost/index.php"><span class="sr-only">(current)</span>Accueil</a>
      </li>
      <li id="contact" class="nav-item">
        <a class="nav-link" href="http://localhost/contact.php">Nous contacter</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="http://localhost/connexion.php">Connexion</a>
      </li>
    </ul>
  </div>
</nav>
		<p>Bonjour visiteur</p>
        <script src="http://localhost/js/commum.js"></script>
	</body>
</html>

bien entendu il faut que j'ajoute un évènement pour que lorsque les utilisateurs clique sur accueil que se soit surligné en noir dans la bar de navigation.
voici le code JS de commum.js

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
var guillaume = document.getElementById("accueil");
guillaume.addEventListener("click",function(){
	document.getElementById('accueil').classList.add("active");
});
et quand je clique sur accueil rien ne se passe.

Merci à vous :-) pour votre aide.