Affecter une classe avec classList

**GuillaumeLynC** · 30/05/2019, 22h18

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.

**psychadelic** · 31/05/2019, 00h02

et que dit le debugger ?

**NoSmoking** · 31/05/2019, 08h19

Bonjour,
de part la construction

Code html :

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

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.

**GuillaumeLynC** · 31/05/2019, 18h34

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

**NoSmoking** · 01/06/2019, 09h19

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 :

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

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.

**psychadelic** · 01/06/2019, 23h49

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=...

Affecter une classe avec classList

JavaScript

Discussions similaires

Partager

Partager