Question

因此由于某种原因，它返回为在我的控制台中无法读取null的属性'addEventListener'。试图使选项卡工作。找不到代码有什么问题。任何帮助，将不胜感激。或者，如果您可以给我一种更好的方法来制作JS标签。

这是我的Javascript代码

function onTabClick(event) {
  let activeTabs = document.querySelectorAll(".active");

  

  activeTabs.forEach(function(tab) {
    tab.className = tab.className.replace("active", "");
  });

  // activate new tab and panel
  event.target.parentElement.className += " active";
  document.getElementById(event.target.href.split("#")[1]).className +=
    " active";
}

var element = document.getElementById("nav-tab");
element.addEventListener("click", onTabClick, false);

And this is my HTML

<div class="container">
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <h4>Home Panel Content</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
              iure quos cum, saepe reprehenderit minima quasi architecto numquam
              nesciunt dicta. Qui excepturi recusandae vitae maiores, inventore
              sequi? Rerum, odio omnis.
            </p>
          </div>
          <div class="tab-pane" id="profile">
            <h4>Profile Panel</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
              iure quos cum, saepe reprehenderit minima quasi architecto numquam
              nesciunt dicta. Qui excepturi recusandae vitae maiores, inventore
              sequi? Rerum, odio omnis. Lorem ipsum dolor sit amet consectetur
              adipisicing elit. Alias distinctio, tempora incidunt aliquid
              adipisci, minus rerum optio libero quae provident sed at
              dignissimos, quia nostrum! Fuga dolorum quia hic magni.
            </p>
          </div>
          <div class="tab-pane" id="messages">
            <h4>Messages Panel</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat
              quos, at qui aspernatur minus animi hic sunt necessitatibus
              incidunt molestiae reprehenderit ratione neque odit ipsa. Nemo
              laborum consequatur adipisci beatae!
            </p>
          </div>
          <div class="tab-pane" id="settings">
            <h4>Settings Panel</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
              possimus sed odit iste vitae, magnam amet illum laudantium ea!
              Fugiat consectetur consequuntur qui eos obcaecati sequi ipsam
              repellat vero voluptate.
            </p>
          </div>
        </div>
        <!-- Tabs -->
        <ul id="nav-tab" class="nav">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#profile">Profile</a></li>
          <li><a href="#messages">Messages</a></li>
          <li><a href="#settings">Settings</a></li>
        </ul>
      </div>

Answer 1

这里的问题是浏览器创建完这些HTML元素之前，您的JavaScript正在运行。这是因为您的JavaScript可能位于HTML代码上方。有两种方法可以解决此问题。一种是将JavaScript移到结束标记</body>之前，或者更好的方法是将其包装在对document.addEventListener("DOMContentLoaded", function() {...});的调用中，如下所示：

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll("#nav-tab a").forEach(function(element) {
        element.addEventListener("click", onTabClick, false);
    });
});

我在解决第一个问题后发现的第二个问题是，由于将事件处理程序应用于<ul>元素，因此当您进入document.getElementById(event.target.href.split("#")[1]).className += " active";时，您会注意到，如果单击<ul>元素而不是链接之一，您会得到一个错误，提示Cannot read property 'split' of undefined。相反，您只想将事件侦听器应用于链接，因此我将其包装在对document.querySelectorAll的调用中，这将为您提供链接，您可以循环并向其中添加事件侦听器。 / p>

尝试使标签工作时无法读取null的属性“ addEventListener”

1 个答案: