Javascript 选项卡使用数据属性而不是 ID 来链接按钮和选项卡

Question

我想创建 Javascript tabs 的变体使用数据属性而不是 ID 来链接选项卡和内容。

它应该是这样工作的:

• 点击 <button class="tab" data-tab-trigger="1">添加一类 is-active并删除任何 is-active所有其他按钮元素的类
• data-tab-trigger 的值匹配 data-tab-content 的值在相应的<div class="tab-content" data-tab-content="1">上并应添加一类 is-open对它
• is-active类突出显示事件选项卡和 is-open类显示相关标签内容

这是我目前正在使用的 JS，它没有按预期工作:

var tabTriggerBtns = document.querySelectorAll('.tabs li button');

tabTriggerBtns.forEach(function(tabTriggerBtn, index){
  tabTriggerBtn.addEventListener('click', function(){
    var tabTrigger = this;
    var tabTriggerData = tabTrigger.getAttribute('data-tab-trigger');
    var tabContent = document.querySelector('.tab-content');
    var currentTabData = document.querySelector('.tab-content[data-tab-content="' + tabTriggerData + '"]').classList.add('is-open');

    if(tabContent !== currentTabData) {
      tabContent.classList.toggle('is-open');
    }

    if(tabTrigger.classList.contains('is-active')) {
      tabTrigger.classList.remove('is-active');
    }
    else {
      tabTriggerBtn.classList.remove('is-active');
      tabTrigger.classList.add('is-active');
    }   
  });
});

这是我正在进行的脚本的代码笔:https://codepen.io/abbasarezoo/pen/752f24fc896e6f9fcce8b590b64b37bc

我很难找到这里出了什么问题。我比较擅长编写 jQuery，但在涉及 vanilla JS 时非常原始，因此非常感谢任何帮助。

Answer 1

您的主要问题之一在于此行:

tabContent !== currentTabData

您可以使用 dataset为了访问数据属性。此外，您可以通过几个步骤简化您的代码:

• 删除类
• 加类

片段:

var tabTriggerBtns = document.querySelectorAll('.tabs li button');

tabTriggerBtns.forEach(function(tabTriggerBtn, index){
    tabTriggerBtn.addEventListener('click', function(){
        var currentTabData = document.querySelector('.tab-content[data-tab-content="' + this.dataset.tabTrigger + '"]');

        // remove classess
        document.querySelector('.tab-content.is-open').classList.remove('is-open');
        document.querySelector('.tabs li button.is-active').classList.remove('is-active');
        // add classes
        currentTabData.classList.add('is-open');
        this.classList.add('is-active');
    });
});

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
}
.tabs {
    width: 25%;
    border: 2px solid red;
}

button.is-active {
    background-color: red;
}

.tab-content__outer {
    width: 75%;
}

.tab-content {
    display: none;
}
.tab-content.is-open {
    display: block;
    background-color: yellow;
}

<ul class="tabs">
    <li>
        <button class="tab is-active" data-tab-trigger="1">First</button>
    </li>
    <li>
        <button class="tab" data-tab-trigger="2">Second</button>
    </li>
    <li>
        <button class="tab" data-tab-trigger="3">Third</button>
    </li>
</ul>
<div class="tab-content__outer">
    <div class="tab-content is-open" data-tab-content="1">
        First
    </div>
    <div class="tab-content" data-tab-content="2">
        Second
    </div>
    <div class="tab-content" data-tab-content="3">
        Third
    </div>
</div>