Question

使用Javascript删除类的classList不起作用，或者是因为代码中的任何其他错误

代码：http://codepen.io/DPK_RAO/pen/VPXxoJ/

    <ul class="nav">
        <li><a href="#video1" id="link1" class="link1">Video 1</a></li>
        <li><a href="#video2" id="link2" class="link2">Video 2</a></li>
    </ul>

    <div class="video1 active" id="video1">Link 1</div>
    <div class="video2" id="video2">Link 2</div>

CSS：

.video1, .video2{
   display:none;
}

.active{
  display:block;
}

JS

document.getElementById("link1").addEventListner("click", activeVideo1);

function activeVideo1(){
    document.getElementById("video2").classList.remove("active");
    var v1 = document.getElementById("video1");
    v1.className += "active";
}

document.getElementById("link2").addEventListner("click", activeVideo2);

function activeVideo2(){
    document.getElementById("video1").classList.remove("active");
    var v2 = document.getElementById("video2");
    v2.className += "active";
}

Answer 1

当我运行脚本时，我在控制台中收到以下错误：

未捕获的TypeError：document.getElementById（...）。addEventListner是不是一个功能

因此，您的脚本甚至无法访问removeClass函数，并且会在事件的侦听器部分停止。

你用拼写错误写了这个函数。它的

addEventList的ë NER

另一个注意事项：

替换它：

v1.className += "active";

使用：

v1.className += " active"; //added a blank

Updated codepen

Answer 2

您在addEventListner中输错了addEventListener请注意e：

addEventListener
____________^

由于你正在使用jQuery，它可能就像下面的例子一样简单：

$("#link1").on("click", function(){
    $("#video2").removeClass("active");
    $("#video1").addClass("active");
});

$("#link2").on("click", function(){
    $("#video1").removeClass("active");
    $("#video2").addClass("active");
});

.video1, .video2{
   display:none;
}

.active{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#video1" id="link1" class="link1">Video 1</a></li>
  <li><a href="#video2" id="link2" class="link2">Video 2</a></li>
</ul>

<div class="video1 active" id="video1">Link 1</div>
<div class="video2" id="video2">Link 2</div>

使用纯JS的解决方案：

document.getElementById("link1").addEventListener("click", function(){
  document.getElementById("video2").classList.remove("active");
  document.getElementById("video1").classList.add("active");
});

document.getElementById("link2").addEventListener("click", function(){
  document.getElementById("video1").classList.remove("active");
  document.getElementById("video2").classList.add("active");
});

.video1, .video2{
display:none;
}

.active{
display:block;
}

<ul class="nav">
  <li><a href="#video1" id="link1" class="link1">Video 1</a></li>
  <li><a href="#video2" id="link2" class="link2">Video 2</a></li>
</ul>

<div class="video1 active" id="video1">Link 1</div>
<div class="video2" id="video2">Link 2</div>

Answer 3

为什么不按照

添加课程

var v2 = document.getElementById("video2");
v2.classList.add('active');

使用两者之间的javascript切换类

3 个答案: