Question

我有一个菜单列表，当您点击其中一个项目时，它应该使用vanilla JavaScript （No 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>

所以，例如当您单击“技术”时，它必须显示“技术”的内容块，等等。

任何帮助入门都会很棒！谢谢

Answer 1

＆＃13;

db.users
    .findAll({
      attributes: [
        'status',
        [db.sequelize.fn('COUNT', 'users.id'), 'entries']
      ],
      include: {
        model: db.organizationEntries,
        where: {


          organization_id: req.params.org_id,
          type: '001',

        },
      },
      group: ['users.status']
    }).then(c => {
      console.log(c);

      let active_users = {
        active_users: c,
      }
      return res.send(active_users);

    })
    .catch(next);

＆＃13;

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);
});

＆＃13;

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

＆＃13;

或与data-attribute相同

＆＃13;

<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>

＆＃13;

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);
});

＆＃13;

JavaScript会在点击

1 个答案: