javascript - JavaScript在onClick中显示和隐藏多个内容块

我有一个菜单列表，当您单击其中一项时，它应该使用香草JavaScript（无jQuery）显示与该项目相关的内容块

当打开该特定项目的内容块时，其他内容块应被隐藏。

HTML菜单项：

<div class="our-clients__categories">
  <a href="#0" class="our-clients__categories--category" data-category="technology"><h4>Technology</h4></a>
  <a href="#0" class="our-clients__categories--category" data-category="retail"><h4>Retail</h4></a>
  <a href="#0" class="our-clients__categories--category" data-category="finance"><h4>Finance</h4></a>
</div>

内容块

<div class="company-brands" data-brand="technology">
 <h1>Technology</h1>
</div>
<div class="company-brands" data-brand="retail">
  <h1>retail</h1>
</div>
<div class="company-brands" data-brand="finance">
  <h1>finance</h1>
</div>

所以例如单击“技术”时，它必须显示“技术”的内容块，依此类推。

上手的任何帮助都很棒！谢谢

最佳答案

const toogleLinks = document.querySelectorAll('.js--company-toggle');
const toogleBlocks = document.querySelectorAll('.js--company-item');

// Loop through all links
Array.from(toogleLinks).forEach(link => {
		// add click event
    link.addEventListener('click', function(event) {
    	// Hide all blocks
    	Array.from(toogleBlocks).forEach(item => item.classList.add('js--company-item--hidden'));
        // Get target block
        const target = this.getAttribute('href');
        // Show target block
        document.querySelector(target).classList.remove('js--company-item--hidden');
    }, false);
});

.js--company-item--hidden {
  display: none;
}

<div class="our-clients__categories">
  <a href="#technology" class="our-clients__categories--category js--company-toggle"><h4>Technology</h4></a>
  <a href="#retail" class="our-clients__categories--category js--company-toggle"><h4>Retail</h4></a>
  <a href="#finance" class="our-clients__categories--category js--company-toggle"><h4>Finance</h4></a>
</div>

<div class="company-brands js--company-item" id="technology">
 <h1>Technology</h1>
</div>
<div class="company-brands js--company-item js--company-item--hidden" id="retail">
  <h1>retail</h1>
</div>
<div class="company-brands js--company-item js--company-item--hidden" id="finance">
  <h1>finance</h1>
</div>

或与数据属性相同

const toogleLinks = document.querySelectorAll('[data-toggle]');

// Loop through all links
Array.from(toogleLinks).forEach(link => {
        // get tooble elements
        const elementsSelector = link.getAttribute('data-toggle')
        const elements = document.querySelectorAll(elementsSelector);
	// add click event
        link.addEventListener('click', function(event) {
        // Hide all blocks
        Array.from(elements).forEach(item => item.setAttribute('hidden', true));
        // Get target block
        const target = this.getAttribute('href');
        // Show target block
        document.querySelector(target).removeAttribute('hidden')
    }, false);
});

<div class="our-clients__categories">
  <a href="#technology" class="our-clients__categories--category" data-toggle=".company-brands"><h4>Technology</h4></a>
  <a href="#retail" class="our-clients__categories--category" data-toggle=".company-brands"><h4>Retail</h4></a>
  <a href="#finance" class="our-clients__categories--category" data-toggle=".company-brands"><h4>Finance</h4></a>
</div>

<div class="company-brands" id="technology">
 <h1>Technology</h1>
</div>
<div class="company-brands" id="retail" hidden>
  <h1>retail</h1>
</div>
<div class="company-brands" id="finance" hidden>
  <h1>finance</h1>
</div>