Добавление/удаление класса динамически

Question

Привет, у меня есть меню, и я хотел бы удалить класс active, добавив его в элемент, который я нажимаю ... это была моя идея, но она не работает так хорошо ...

<div id="header2"> 
      <div class="menu"> 
       <ul> 
        <li id="menu_1" onclick="abrirPag('home.html')">Home</li> 
        <li id="menu_2" onclick="abrirPag('calendario_2014.html')">Calendário</li> 
        <li id="menu_3" onclick="abrirPag('classificacao_2014.html')">Classificação</li> 
        <li id="menu_4" onclick="abrirPag('equipes_2014.html')">Equipes</li> 
        <li id="menu_5" onclick="abrirPag('recordes.html')">Recordes</li> 
        <li id="menu_6" onclick="abrirPag('regulamento_2014.html')">Regulamento</li> 
       </ul> 
      </div> 
     </div> 

функция OnLoad, чтобы добавить класс активного к первому пункту:

window.onload=function() { 
var containermenu = document.getElementById("header2"); 
var navitemmenu = containermenu.querySelector(".menu ul li"); 
var identmenu = navitemmenu.id.split("_")[1]; 
navitemmenu.parentNode.setAttribute("data-current",identmenu); 
navitemmenu.setAttribute("class","active"); 

функция изменить класс:

function abrirPag(valor){ 
var currentmenu = this.parentNode.getAttribute("data-current"); 
document.getElementById("menu_" + currentmenu).removeAttribute("class"); 
var identmenu = this.id.split("_")[1]; 
this.setAttribute("class","tabActiveHeader"); 
this.parentNode.setAttribute("data-current",identmenu); 

Я получаю следующую ошибку, когда я нажимаю любой из элементов: «Непринятый TypeError: Не удается вызвать метод getAttribute» undefined »

Может кто-нибудь мне помочь?

Answer 1

Значение this в встроенном обработчике будет объектом window вместо элемента. Вам нужно пройти this, чтобы перейти к этой функции.

<li id="menu_1" onclick="abrirPag(this, 'home.html')">Home</li> 

Тогда ссылайтесь на него как на первый элемент.

function abrirPag(elem, valor){ 
    var currentmenu = elem.parentNode.getAttribute("data-current"); 
    document.getElementById("menu_" + currentmenu).className = ""; 
    var identmenu = elem.id.split("_")[1]; 

    elem.className = "tabActiveHeader"; 
    elem.parentNode.setAttribute("data-current",identmenu); 
} 

Я также изменил его использовать .className свойство вместо .get/setAttribute() для получения и установки класса.

Answer 2

Вы можете использовать Dóm ClassList добавить удалить классы

var element = document.getElementById("someId"); 
//Use add to add a class 
element.classList.add("active"); 
//use remove to remove a class 
element.classList.remove("active"); 

Вам понадобится polyfill использовать его на IE < 10 и некоторые из старых версий браузеров.

Чтобы удалить из всех других меню и добавить к текущей делать, как печенье монстра предложить, а также передать элемент в вашей функции

function abrirPag(ele,valor){ 
    var current = document.getElementsByClassName("tabActiveHeader"); 
    if(current[0]){ 
     current[0].classList.remove("tabActiveHeader"); 
    } 
    ele.classList.add("tabActiveHeader"); 
} 

Answer 3

Вот это совет: использовать JQuery, вы будете иметь гораздо проще жизнь :

$("#header2 .menu li a").on("click", function(e) { 
    e.preventDefault(); 
    var index = $("#header2 .menu li a").index(this); 
    $("#header2 .menu li a").removeClass("active").parent().parent().data("current", index); 
    $(this).addClass("active"); 
    $(".content").text($(this).attr("href")); 
}); 

Посмотрите на this Fiddle I've created!