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

当我点击任何元素时出现以下错误：＆＃34; Uncaught TypeError：无法调用方法＆＃39; getAttribute＆＃39;未定义＆＃34;

有人可以帮助我吗？

Answer 1

您可以使用dom 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上使用它＆lt; 10和一些旧版本的浏览器。

要从所有其他菜单中删除并添加到当前执行cookie怪物建议并将该元素传递给您的函数

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

Answer 2

内联处理程序中的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 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 ！

动态添加/删除类

3 个答案: