Question

我有一个问题，我想创建像Tab这样的东西。首先所有内容都是display: none，然后我创建了一个用于切换内容的代码，这是我的代码，它就像一个魅力：

showOrHide = (target) => {
    if (document.getElementById(target).style.display == 'block') {
        document.getElementById(target).style.display = 'none';
    } else {
        document.getElementById(target).style.display = 'block';
    }
}

但是用户可以同时显示标签，所以我想强制用户立刻只看到1个内容。所以我添加了这个链接点击链接，首先所有内容消失，然后显示项目被点击，但它没有工作，并在向上面的函数添加这行代码后没有显示给我（.subLists是一个所有内容的课程）：

showOrHide = (target) => {
    document.querySelectorAll('.subLists').style.display = 'none'; // This
    if (document.getElementById(target).style.display == 'block') {
        document.getElementById(target).style.display = 'none';
    } else {
        document.getElementById(target).style.display = 'block';
    }
}

Answer 1

querySelectorAll()返回集合。您必须遍历所有元素才能设置display='none'。

您的代码应为：

showOrHide = (target) => {
  document.querySelectorAll('.subLists').forEach(function(el){
      el.style.display = 'none'; // This
  });
  if (document.getElementById(target).style.display == 'block') {
      document.getElementById(target).style.display = 'none';
  } else {
      document.getElementById(target).style.display = 'block';
  }
}

在为类添加样式后，为什么不能使用ID向DOM添加样式？

1 个答案: