javascript 一页HTML中的多个选项卡部分

mrfwxfqh 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(141)

我创建了基于此页面上的代码的html页面中的选项卡。https://www.w3schools.com/w3css/w3css_tabulators.asp

<h1>First Tab</h1>
<div class="w3-light-grey">
<a class="codebtn w3-dark-grey" onclick="openCode(event, 'TabA1')" id="myLink">Tab A1</a>
<a class="codebtn" onclick="openCode(event, 'TabA2')">Tab A2</a>
</div>

<div id="TabA1" class="code">
<pre><code class="language-sh" data-lang="sh">
Code Here
Code Here
Code Here
</code></pre>
</div>

<div id="TabA2" class="code" style="display:none">
<pre><code class="language-sh" data-lang="sh">
More Code
More Code
More Code
</code></pre>
</div>
<h2>Second Tab</h2>
<div class="w3-light-grey">
<a class="codebtn w3-dark-grey" onclick="openCode(event, 'TabB1')" id="myLink">Tab B1</a>
<a class="codebtn" onclick="openCode(event, 'TabB2')">Tab B2</a>
</div>

<div id="TabB1" class="code">
<pre><code class="language-sh" data-lang="sh">
Another Tab Contents
Another Tab Contents
Another Tab Contents
</code></pre>
</div>

<div id="TabB2" class="code" style="display:none">
<pre><code class="language-sh" data-lang="sh">
2nd Tab
2nd Tab
2nd Tab
</code></pre>
</div>

如果我只有1个选项卡部分，它的工作，但如果我有2个或更多，有一个问题。当我点击第一个选项卡部分的一个选项卡，它会影响所有选项卡部分，你可以在这里看到。https://codepen.io/mochi777/pen/YzOaoML
第一个选项卡和第二个选项卡应该是独立的。当我加载页面时，它显示正常。当我单击“选项卡A2”时，选项卡B1和B2的内容消失。除了创建一个单独的javascript之外，解决这个问题的最佳方法是什么？
当我点击“标签A2”，标签B1和B2应该不会受到影响。我知道我可以改变类，并创建一个单独的javascript将解决这个问题，但如果我有许多标签表，这将是一个问题。我正在寻找一个更好的方法来解决这个问题。

JavaScript

来源：https://stackoverflow.com/questions/75739594/multiple-tab-section-in-one-page-html

1条答案

按热度按时间

k5ifujac1#

乍一看，您的代码并不区分“选项卡集”，因此当您打开一个选项卡集时，您将关闭所有其他选项卡集（包括来自其他选项卡集的选项卡集）。
您可以通过制作某种过滤器来补救这一点，比如说“只删除 * 此 * 集”。
这当然可以通过多种方式实现，最明显的方式是，例如：

当打开一个选项卡时，关闭在同一个 Package div中 Package 的所有选项卡

document
  .querySelectorAll('button.tab-btn')
  .forEach(node => node.addEventListener('click', showTab));

function showTab(event) {
  const targetTabId = event.target.getAttribute('data-target');
  const targetTab = document.getElementById(targetTabId);
  const tabSetGroup = targetTab.parentElement.querySelectorAll('div');
  
  // hide all tabs in the same wrapper as target
  tabSetGroup.forEach(tab => tab.style.display = 'none');
  // show only target
  targetTab.style.display = '';
}

<div>
  <button class="tab-btn" data-target="tab-a1">Tab A.1</button>
  <button class="tab-btn" data-target="tab-a2">Tab A.2</button>
</div>
<div>
  <div id="tab-a1">Content A.1</div>
  <div id="tab-a2" style="display:none">Content A.2</div>
</div>
<div>
  <button class="tab-btn" data-target="tab-b1">Tab B.1</button>
  <button class="tab-btn" data-target="tab-b2">Tab B.2</button>
</div>
<div>
  <div id="tab-b1">Content B.1</div>
  <div id="tab-b2" style="display:none">Content B.2</div>
</div>

给每个标签添加一些属性，说明它属于哪个组。2然后在打开一个标签时查看它，并关闭所有其他具有相同标签值的标签。

一个二个一个一个

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 一页HTML中的多个选项卡部分

1条答案

相关问题

热门标签

最新问答