Intereting Posts
Поддерживать соотношение сторон div, но ширину и высоту экрана в CSS? Плавающие divs снизу вверх, используя CSS? Как получить текущий размер страницы в КБ, используя только javascript? При нажатии одной кнопки в ng-повторном изменении цвета, не все используют Angularjs Свойство глубины в JS? изображение не извлекается из базы данных в html-форму, используя php PHP MYSQL – заполнять таблицы с нумерацией HTML-таблицы на основе того, соответствуют ли они номер строки Генератор HTML: конвертируйте HTML в PlainText и помещайте в TextBox с помощью PHP Выравнивание текста по центру вертикально в кнопке Получить большинство потомков (ов) потомков в jQuery Как установить цвет фона для бокс-ссылки? Заполните путь SVG фоновым изображением, не зная высоты и ширины min-height / min-width не учитывает размер коробки в некоторых браузерах Может ли несколько элементов HTML получать фокус одновременно? Как сделать что-то раньше на submit?

Как добавить и удалить активный class для элемента в чистом JavaScript

Я пытаюсь сделать меню навигации. Я сделал все HTML и CSS, когда пришел на javascript. Я поражен посередине. Я могу добавить class к элементу, но я не могу удалить оставшиеся элементы classа. Пожалуйста, помогите мне с этим.
вот мой код

   Navigation class Toggling  * { 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; }    
function myFunction(e) { e.target.className = "active"; }

и вот мой Кодепен

Используйте document.querySelectorAll чтобы найти элемент, который в настоящее время имеет active class, затем вы можете удалить этот class.

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

JSFIDDLE

Вместо document.querySelectorAll вы также можете использовать document.querySelector

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

JSFIDDLE 2

Вы можете использовать методы classList для add , remove или toggle .

Сначала удалите имя classа из предыдущего:

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

Затем добавьте его в новый элемент:

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

Вы можете использовать «чистый» JavaScript Element.classList чтобы добавить и удалить class из вашего элемента DOM.

add : Добавить указанные значения classа. Если эти classы уже существуют в атрибуте элемента, то они игнорируются.

remove : Удалить указанные значения classа.

Используйте Document.querySelectorAll() для возврата элементов в документе, которые соответствуют указанной группе селекторов CSS.

Дополнительная информация:

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

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

Что касается вашего кода, вы можете пометить его как активный элемент, когда пользователь нажмет на него, используя следующий код:

 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"); }; 
 * { 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

  

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; } 

JS

  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: Отличное решение можно найти здесь: https://gomakethings.com/getting-all-sibling-elements-when-a-link-or-button-is-clicked-with-vanilla-js/

вы можете сделать это в чистом javascript

  function myFunction(e,ev) { for(var i=0;i 
 < !DOCTYPE html>   Navigation class Toggling    

Я лично придерживался метода document.querySelector . querySelector принимает запрос типа CSS, который мы будем использовать для поиска активного classа на странице. Если он существует (оператор if ), удалите его и примените новый class к цели.

Помните, что использование className = "" приведет к удалению всех classов. Было бы более аккуратно использовать classList для всего.

 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'); } 

JS

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

Для лучшей поддержки браузера:

 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(" "); }); 
 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"); }; 
 * { 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; } 
 

Ниже следует помочь.

 //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";