Affecter une classe avec classList

Version imprimable

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:

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:

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.

31/05/2019, 00h02
psychadelic

et que dit le debugger ?
31/05/2019, 08h19
NoSmoking
Bonjour,
de part la construction
Code:

1 2 3 <li> <a>...</a> </li>
lorsque tu cliques sur l'élément <li>, ton élément <a> est également cliqué et donc du coup ton navigateur charge la page indiquée dans href.
31/05/2019, 18h34
GuillaumeLynC

Citation:

Envoyé par psychadelic

et que dit le debugger ?

aucune,

NoSmoking mon id se trouve dans la balise <li> c'est celle-ci lorsque qu'on clique sur accueil il y a une classe qui s'ajoute dans la balise <li>

Donc je suis obligé de passer par un bouton évenement click et le code n'a pas l'air de fonctionner et peut-être que j'ai oublié de faire dans le script enfin je n'en sait rien :-/ :? :(
01/06/2019, 09h19
NoSmoking
Même si tu mets l'événement sur ton <LI>, c'est ton <A> qui l'a initié.
↪ Présentation des évènements du DOM

Pour t'en rendre compte tu peux toujours ajouter ce bout de code en fin de ta page
Code:

1 2 3 4 5 6 document.onclick = function(e) { const elems = e.path; elems.forEach(function(el) { console.log(el.tagName); }); }
et regarder ce qui se trouve dans la console, F12.

A mon sens il te faut plutôt reprendre l'approche de ton problème, par exemple tu pourrais t’intéresser à window.location.href, si ta page n'est pas générée côté serveur.
01/06/2019, 23h49
psychadelic

Citation:

Envoyé par GuillaumeLynC

NoSmoking mon id se trouve dans la balise <li> c'est celle-ci lorsque qu'on clique sur accueil il y a une classe qui s'ajoute dans la balise <li>

Donc je suis obligé de passer par un bouton événement click et le code n'a pas l'air de fonctionner et peut-être que j'ai oublié de faire dans le script enfin je n'en sait rien :-/ :? :(

Ce que dit NoSmoking me semble bien être la raison: le <a href=... occulte toute la place et empêche le <li.. de recevoir le moindre click souris, parce qu'il est "capturé" avant par le <a href=...