javascript - 在两个之间使用javascript切换类

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

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

Uncaught TypeError: document.getElementById(...).addEventListner is not a function

因此您的脚本甚至没有进入 removeClass 函数，它在事件的监听器部分停止。

您编写的函数有错别字。这是

addEventListener

另注:

替换这个:

v1.className += "active";

与:

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

Updated codepen