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

Question

这是我的CSS。我的目标是在您单击某个选项卡时添加规则，以便它显示必要的内容，但它不起作用。.show#tab-1-content, #tab-2-content, #tab-3-content {  display: none;}.show {  display: block !important;}这是我的整个Javascript页面。我把 在控制台中查看类是否被正确添加，似乎每当我单击它时它都是这样，但它没有像它应该的那样显示内容。console.logshowconst tabItems = document.querySelectorAll('.tab-item');const tabContentItems = document.querySelectorAll('.tab-content-item');// select tab content itemfunction 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 clicktabItems.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">

    <div id="tab-1-content" class="tab-content-item"></div>

    <div id="tab-2-content" class="tab-content-item"></div>

    <div id="tab-3-content" class="tab-content-item"></div>

</div>