Comment puis-je ajouter et supprimer une classe active à un élément en JavaScript

Je suis en train de faire un menu de navigation j'ai fait tous les HTML et CSS quand venir à javascript je suis frappé dans le milieu, je suis en mesure d'ajouter une classe à l'élément, mais je ne suis pas en mesure de supprimer la classe des éléments restants. Merci de m'aider avec cela.

voici mon code

<!DOCTYPE html>
<html>
<head>
<title>Navigation class Toggling</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: auto;
max-width: 600px;
margin: 0 auto;
}
nav {
width: 100%;
height: 40px;
background-color: cornflowerblue;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
padding: 8px 15px;
display: block;
text-transform: capitalize;
background-color: darkgray;
color: #fff;
}
a.active {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<header>
<nav>
<ul onclick="myFunction(event)">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
<script type="text/javascript">
function myFunction(e) {
e.target.className = "active";
}
</script>
</body>
</html>

et voici mon Codepen

où est votre codepen ?
Avez-vous vérifier les réponses à cette question? stackoverflow.com/q/6787383
Double Possible de Comment puis-je basculer d'un élément de la classe en JavaScript?

InformationsquelleAutor Venu Madhav | 2016-08-17

Utilisation document.querySelectorAll de trouver l'élément qui ont actuellement le active classe, alors vous pouvez supprimer cette classe.

function myFunction(e) {
var elems = document.querySelectorAll(".active");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});
e.target.className = "active";
}

JSFIDDLE

Au lieu de document.querySelectorAll vous pouvez également utiliser document.querySelector

 function myFunction(e) {
var elems = document.querySelector(".active");
if(elems !==null){
elems.classList.remove("active");
}
e.target.className = "active";
}

JSFIDDLE 2

Modifier

Au lieu d'itérer sur l'ensemble de la collection, vous pouvez sélectionner l'élément qui ont une classe active à l'aide de document.queryselector. Également fournir une id à l'ul de sorte que vous pouvez cibler l'élément spécifique

JS:

function myFunction(e) {
if (document.querySelector('#navList a.active') !== null) {
document.querySelector('#navList a.active').classList.remove('active');
}
e.target.className = "active";
}

CSS:

<style type="text/css">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: auto;
max-width: 600px;
margin: 0 auto;
}
nav {
width: 100%;
height: 40px;
background-color: cornflowerblue;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
padding: 8px 15px;
display: block;
text-transform: capitalize;
background-color: darkgray;
color: #fff;
}
a.active {
background-color: cornflowerblue;
}

HTML:

<title>Navigation class Toggling</title>
<header>
<nav>
<ul onclick="myFunction(event)" id='navList'>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>

réponse utile...

InformationsquelleAutor brk

Vous pouvez utiliser classList méthodes pour add, remove, ou toggle.

D'abord supprimer le nom de classe de la précédente:

//assuming there's only one with such class name
//otherwise you need querySelectorAll and a loop
document.querySelector('.active').classList.remove('active')

Puis ajouter le nouvel élément:

e.target.classList.add('active')

InformationsquelleAutor Leo

Vous pouvez utiliser "pure" JavaScript Element.classList ajouter et supprimer une classe à partir de votre élément du DOM.

add: Ajouter spécifié de valeurs de classe. Si ces classes existent déjà dans l'attribut de l'élément, puis ils sont ignorés.

remove: Supprimer spécifié de valeurs de classe.

Utilisation Document.querySelectorAll()à returnsa éléments dans le document qui correspondent le groupe spécifié de sélecteurs CSS.

Plus d'infos sur:

https://developer.mozilla.org/en/docs/Web/API/Element/classList

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Au sujet de votre code, vous pouvez le marquer comme active votre élément lorsque l'Utilisateur de cliquer dessus avec le code suivant:

JS:

window.myFunction = function(event) {
//reset all menu items
document.querySelectorAll('ul li a.active').forEach(function(item) {
item.classList.remove('active');
})
//mark as active selected menu item
event.target.classList.add("active");
};

CSS:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: auto;
max-width: 600px;
margin: 0 auto;
}
nav {
width: 100%;
height: 40px;
background-color: cornflowerblue;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
padding: 8px 15px;
display: block;
text-transform: capitalize;
background-color: darkgray;
color: #fff;
}
a.active {
background-color: cornflowerblue;
}
.active {
ackground-color: red;
}

HTML:

<header>
<nav>
<ul onclick="window.myFunction(event)">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>

InformationsquelleAutor GibboK

HTML

<div class="container">
<nav>
<ul class="nav">
<li class="nav__item"><a class="nav__link active" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 1</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 2</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 3</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 4</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 5</a></li>
</ul>
</nav>
</div>

CSS

    * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1024px;
display: block;
margin: 30px auto;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.nav__item {
padding: 1rem;
}
.nav__link {
display: block;
padding: .3125rem 1.5rem;
text-transform: uppercase;
}
.nav__link.active  {
border: 1px solid #ff4b4c;
color: #ff4b4c;
}

    document.addEventListener('DOMContentLoaded', function() {
const selector = '.nav__link';
const elems = Array.from(document.querySelectorAll(selector));
const navigation = document.querySelector('nav');
function makeActive(evt) {
const target = evt.target;
if (!target || !target.matches(selector)) {
return;
}
elems.forEach(elem => elem.classList.remove('active'));
evt.target.classList.add('active');
};
navigation.addEventListener('mousedown', makeActive);
});

BTW: UNE excellente solution est ici: https://gomakethings.com/getting-all-sibling-elements-when-a-link-or-button-is-clicked-with-vanilla-js/

InformationsquelleAutor Mary Pieroszkiewicz

vous pouvez le faire comme ceci en pure javascript

JS:

   function myFunction(e,ev) {
for(var i=0;i<e.children.length;i++)
{
e.children[i].childNodes[0].className = "";
}
ev.target.className = "active"; 
}

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Navigation class Toggling</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: auto;
max-width: 600px;
margin: 0 auto;
}
nav {
width: 100%;
height: 40px;
background-color: cornflowerblue;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
padding: 8px 15px;
display: block;
text-transform: capitalize;
background-color: darkgray;
color: #fff;
}
a.active {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<header>
<nav>
<ul onclick="myFunction(this,event)">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
<script type="text/javascript">
</script>
</body>
</html>

IMO le problème de l'utilisation .className = ""; est qu'il va supprimer toutes les css class appliquée à l'élément DOM, quand au lieu d'utiliser classList.remove nous pouvons supprimer de manière sélective uniquement une classe CSS spécifique.

InformationsquelleAutor Dinesh Shah

0

Je serais personnellement coller avec le document.querySelector méthode.
querySelector accepte un CSS comme requête, que nous allons utiliser pour trouver une classe active sur la page. Si elle existe (la if déclaration), de supprimer et d'appliquer la nouvelle classe sur la cible.

S'il vous plaît être conscient que l'utilisation de className = "" entraînera dans toutes les classes en cours de suppression. Il serait plus intéressant de les utiliser classList pour tout.

JS:
```
function myFunction(e) {
var el = document.querySelector('.active');
//Check if the element exists to avoid a null syntax error on the removal
if(el) {
el.classList.remove('active');
}
e.target.classList.add('active');
}
```
InformationsquelleAutor Roberrrt

var targets = document.querySelectorAll('.some-class');
targets.onclick = function(evt) {
evt.classList.toggle('{your-class}');
};

Pour une meilleure prise en charge du navigateur:

targets.onclick = function(evt) {
var el = evt.target;
var classes = el.className.split(" ");
var classIndex = classes.indexOf('{your-class}');
if (classIndex >= 0) {
classes.splice(1, classIndex);
} else {
classes.push('{your-clas}');
}
el.className = classes.join(" ");
});

InformationsquelleAutor dzej.5

JS:

window.myFunction = function(event) {
var elms = document.querySelectorAll('ul li a');
//reset all you menu items
for (var i = 0, len = elms.length; i < len; i++) {
elms[i].classList.remove('active');
}
//mark as active clicked menu item
event.target.classList.add("active");
};

CSS:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: auto;
max-width: 600px;
margin: 0 auto;
}
nav {
width: 100%;
height: 40px;
background-color: cornflowerblue;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
padding: 8px 15px;
display: block;
text-transform: capitalize;
background-color: pink;
color: #fff;
}
a.active {
background-color: blue;
}
.active {
ackground-color: red;
}

HTML:

<header>
<nav>
<ul onclick="window.myFunction(event)">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>

InformationsquelleAutor satwick

-1

Ci-dessous devraient vous aider.

//Remove all classes by ID
document.getElementById("elementIdHere").className = "";
//If you wish to keep some classes on the element, use below
document.getElementById("elementIdHere").className = "keepClass";

Peut quiconque vers le bas voté expliquer pourquoi ce n'est pas une réponse acceptable?

InformationsquelleAutor Daniel Shillcock

Vous devez vous connecter pour publier un commentaire.