Question

我想使用数据属性而非ID来链接标签和内容，以创建https://codepen.io/abbasarezoo/pen/752f24fc896e6f9fcce8b590b64b37bc的变体。

这是它应该如何工作的：

单击status将添加一个<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类显示相关标签的内容

这是我当前正在使用的JS，它无法按预期运行：

is-open

以下是我正在进行的脚本的Codepen：PSEXEC, access denied errors

我在这里很难找到问题所在。我写jQuery相对比较自在，但是对于香草JS来说却很原始，因此非常感谢您的帮助。

Answer 1

您的主要问题之一是此行：

sub storeShmcoreservJobsLogs {
    my($self,$dbh)=@_;

    if ( $self->has_jobs ) {

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

删除课程
添加课程

摘要：

tabContent !== currentTabData

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

使用数据属性而不是ID链接按钮和标签的Javascript标签

1 个答案: