動態添加/刪除類

Question

你好，我有一個菜單，我想刪除活動的類，並將其添加到我單擊的元素....這是我的想法，但它不能很好地工作...

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

當我點擊任何元素時出現以下錯誤：「Uncaught 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

您可以使用DOM班級列表添加刪除類

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看看！