当我使用javaScript单击元素时，我正在向元素添加css规则，但该规则似乎不起作用

Question

这是我的CSS。我的目标是在您单击某个选项卡时添加规则，以便它显示必要的内容，但它不起作用。.show

#tab-1-content, #tab-2-content, #tab-3-content {

  display: none;

}

.show {

  display: block !important;

}

这是我的整个Javascript页面。我把 在控制台中查看类是否被正确添加，似乎每当我单击它时它都是这样，但它没有像它应该的那样显示内容。console.logshow

const tabItems = document.querySelectorAll('.tab-item');

const tabContentItems = document.querySelectorAll('.tab-content-item');

// select tab content item

function selectItem(e) {

  removeBorder();

  removeShow();

  //Add border to current tab

  this.classList.add('tab-border');

  //Grab content item from DOM

  const tabContentItem = document.querySelector(`#${ this.id }-content`);

  //Add show class

  tabContentItem.classList.add('show');

  console.log(tabContentItem)

}

function removeBorder() {

 tabItems.forEach(item => item.classList.remove('tab-border'));

}

function removeShow() {

 tabContentItems.forEach(item => item.classList.remove('show'));

}

// Listen for tab click

tabItems.forEach(item => item.addEventListener('click', selectItem));

我的 Border 变量按预期工作，删除边框并将其添加到我单击的元素中。我试图只是制作一个Netflix登陆页面克隆作为一个项目，这是该网站的链接 https://netflx.github.io/ 。我删除了页脚并替换了图像，因为我的防病毒软件不允许我访问该网站。我试图完全按照netflix的作用，当您单击不同的选项卡元素时弹出不同的部分，但它没有这样做。它仅适用于第一个选项卡，但不显示其他两个选项卡的内容。有谁知道发生了什么以及我如何解决它？

Answer 1

您的 DOM 结构正在运行：.container > #tab-1-content > .tab-{tabnumber}-content因此，ID 为 的 div 始终设置为不显示任何内容。#tab-1-content我想你的班级和ID名称混为一谈了。 始终设置为仅显示第一个选项卡，因为 正在应用于该外部 div，但是当设置内部 div 时，外部 div 仍不显示。#tab-1-contentdisplay: none.show查看图像，div ID 没有意义。从外部 div 中删除 。从内部 div 中删除该类，并为其提供一个 ID，这应该可以让您继续前进。#tab-1-content.tab-1-content-inner#tab-1-content

Answer 2

您的 HTML 语法有问题。选项卡 2 内容和选项卡 3 内容位于选项卡 1 内容中。您应该像这样修复它们<div class="container">&nbsp; &nbsp; <div id="tab-1-content" class="tab-content-item"></div>&nbsp; &nbsp; <div id="tab-2-content" class="tab-content-item"></div>&nbsp; &nbsp; <div id="tab-3-content" class="tab-content-item"></div></div>