在一个页面上的两个标签菜单相互冲突。

Question

我觉得解决这个问题的方法一定是显而易见的，但我就是想不通......

我有一些非常简单的vanilla javascript，有两个标签菜单。问题是我不知道如何在不产生冲突的情况下独立控制两个菜单。最终的目标是让两个菜单相互独立地初始化和控制。

codepen在这里。https:/codepen.iotrevor3999pengOPPoYB。

在那个代码本中，我使用共享类来选择元素，这显然是一个问题，所以我为每个标签组初始化了单独的ID，但我不知道如何利用它们。所以我已经为每个标签组初始化了单独的ID，但我就是不知道如何利用它们......

任何帮助都将是非常感激的--谢谢你

HTML

<section class="section">
    <div class="container">

        <div class="columns">
            <div class="column">
                <h2 class="title is-2 has-text-centered is-rift has-margin-top">Featured <span
                        class="has-text-primary">Sensors</span>
                </h2>
            </div>
        </div>
        <div class="columns">
            <div class="column is-offset-1">


                <div class="tabs is-medium is-uppercase" id="sensor-tabs">
                    <ul>
                        <li class="is-active" data-tab="1">
                            <a>
                                <span>EO/IR</span>
                            </a>
                        </li>
                        <li data-tab="2">
                            <a>
                                <span>Radar</span>
                            </a>
                        </li>
                        <li data-tab="3">
                            <a>
                                <span>Other Sensors</span>
                            </a>
                        </li>
                    </ul>
                </div>


            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-10">
                <div id="sensor-tab-content" class="tab-content">
                    <menu class="is-active" data-content="1">
                        <div class="columns is-multiline">
EO/IR
                        </div>
                    </menu>
                    <menu data-content="2">
                        <div class="columns is-multiline">
Radar
                        </div>
                    </menu>
                    <menu data-content="3">
                        <div class="columns is-multiline">
Other
                        </div>
                    </menu>
                </div>
            </div>
        </div>

    </div>
</section>


<div class="container">
    <div class="columns">
        <div class="column">
            <hr>
        </div>
    </div>
</div>


<section class="section">
    <div class="container">

        <div class="columns">
            <div class="column">
                <h2 class="title is-2 has-text-centered is-rift has-margin-top">Featured <span
                        class="has-text-primary">Platforms</span>
                </h2>
            </div>
        </div>
        <div class="columns">
            <div class="column is-offset-1">


                <div class="tabs is-medium is-uppercase" id="platform-tabs">
                    <ul>
                        <li class="is-active" data-tab="uas">
                            <a>
                                <span>UAS/RPAS</span>
                            </a>
                        </li>
                        <li data-tab="fixed">
                            <a>
                                <span>Fixed Wing</span>
                            </a>
                        </li>
                        <li data-tab="rotary">
                            <a>
                                <span>Rotary Wing</span>
                            </a>
                        </li>
                        <li data-tab="land">
                            <a>
                                <span>Land</span>
                            </a>
                        </li>
                        <li data-tab="naval">
                            <a>
                                <span>Naval</span>
                            </a>
                        </li>
                    </ul>
                </div>


            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-10">
                <div id="platform-tab-content" class="tab-content">
                    <menu class="is-active" data-content="uas">
                        <div class="columns is-multiline">
UAS
                        </div>
                    </menu>
                    <menu data-content="fixed">
                        <div class="columns is-multiline">
Fixed Wing
                        </div>
                    </menu>
                    <menu data-content="rotary">
                        <div class="columns is-multiline">
Rotary Wing
                        </div>
                    </menu>
                    <menu data-content="land">
                        <div class="columns is-multiline">
Land
                        </div>
                    </menu>
                    <menu data-content="naval">
                        <div class="columns is-multiline">
Naval
                        </div>
                    </menu>
                </div>
            </div>
        </div>

    </div>
</section>

CSS

.tab-content menu {
    display: none;
}

.tab-content menu.is-active {
    display: block;
}

Javascript

const TABS = [...document.querySelectorAll('.tabs li')];
const CONTENT = [...document.querySelectorAll('.tab-content menu')];
const ACTIVE_CLASS = 'is-active';

function initTabs() {
    TABS.forEach((tab) => {
      tab.addEventListener('click', (e) => {
        let selected = tab.getAttribute('data-tab');
        updateActiveTab(tab);
        updateActiveContent(selected);
      })
    })
}

function updateActiveTab(selected) {
  TABS.forEach((tab) => {
    if (tab && tab.classList.contains(ACTIVE_CLASS)) {
      tab.classList.remove(ACTIVE_CLASS);
    }
  });
  selected.classList.add(ACTIVE_CLASS);
}

function updateActiveContent(selected) {
  CONTENT.forEach((item) => {
    if (item && item.classList.contains(ACTIVE_CLASS)) {
      item.classList.remove(ACTIVE_CLASS);
    }
    let data = item.getAttribute('data-content');
    if (data === selected) {
      item.classList.add(ACTIVE_CLASS);
    }
  });
}

initTabs();

Answer 1

这里有一个懒惰的解决方案，只做了一些改动。https:/codepen.iowatofundefinedpenKKVVROW。

console.log("I don't know what kind of code snippet to put here to make the validation happy, sorry!")