Question

因此，我有这个基本的标签模块，应该在单击按钮后显示其各自的内容。我设法使其打开并在单击后显示内容。但是，其他的也保持开放状态。

我的问题是：如何做到这一点，所以当单击并打开一个选项卡时，其他选项卡会隐藏吗？

1>------ Build started: Project: Ch8P19, Configuration: Debug Win32 ------
1>MyForm.cpp
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(148): error C3644: 'Ch8P19::MyForm::Filter': cannot compile the function to generate managed code
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(148): note: Inline native assembly not supported in managed code
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(169): error C3821: 'int Ch8P19::MyForm::Filter(char)': managed type or function cannot be used in an unmanaged function
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(169): note: Inline native assembly not supported in managed code
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(145): error C3645: 'Ch8P19::MyForm::Filter': __clrcall cannot be used on functions compiled to native code
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(173): error C3644: 'Ch8P19::MyForm::Converts': cannot compile the function to generate managed code
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(173): note: Inline native assembly not supported in managed code
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(186): error C3821: 'int Ch8P19::MyForm::Converts(int,short)': managed type or function cannot be used in an unmanaged function
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(186): note: Inline native assembly not supported in managed code
1>c:\users\trent\source\repos\ch8p19\ch8p19\myform.h(171): error C3645: 'Ch8P19::MyForm::Converts': __clrcall cannot be used on functions compiled to native code
1>Done building project "Ch8P19.vcxproj" -- FAILED.
========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

const button = document.querySelectorAll('.tabButton');

button.forEach(function(btn) {
  btn.addEventListener('click', tabClick, false);
})

function tabClick(event) {

  let currentTab = document.querySelectorAll('.active');

  currentTab.forEach(function(tab) {
    tab.className = tab.className.replace('active' , '');
    event.target.parentElement.className += ' active';
    document.getElementById(event.target.href.split('#')[1]).classList.add('on');
  })
};

Answer 1

似乎您正在使用CSS类.on来应用样式，因此在设置之前，您可以使用div获取所有标签内容.tabInner并删除{{ 1}}类：.on

您的问题未包含任何样式，因此我的代码基于document.querySelectorAll('.tabInner').forEach(el => el.classList.remove('on'));类正在处理显示样式的假设。

以下是我认为您所追求的工作摘要。我修改了您的JS代码的一部分以一致地使用.on并交换为箭头功能classList。

() => {}

const button = document.querySelectorAll('.tabButton');

button.forEach(btn => btn.addEventListener('click', tabClick, false));

function tabClick(event) {

  const currentTab = document.querySelectorAll('.active');

  currentTab.forEach(tab => {
    tab.classList.remove('active');
    event.target.parentElement.classList.add('active');
    document.querySelectorAll('.tabInner').forEach(el => el.classList.remove('on'));
    document.getElementById(event.target.href.split('#')[1]).classList.add('on');
  })
};

.tabInner {
  display: none;
}

.tabInner.on {
  display: block;
}

打开一个选项卡时如何删除其他选项卡

1 个答案: