javascript - 将类名传递给函数参数

Question

我正在处理这部分代码:

<div class="tabs-buttons-container">
            <button class="tabs-button" onclick="openTabs(event, 'test11', 'red')">Tab 1</button>
            <button class="tabs-button" onclick="openTabs(event, 'test12')">Tab 2</button>
            <button class="tabs-button" onclick="openTabs(event, 'test13')">Tab 3</button>
            <span class="test"></span>
            <span class="red"></span>
            <span class="white"></span>
        </div>

const openTabs = (event, tab, test) => {
    let i, tabContent, tabButton;

    tabContent = document.getElementsByClassName("tabs-content")

    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    document.getElementById(tab).style.display = "block";
    document.getElementsByClassName(test).style.display = "block";
}

我当前的目标是将类“red”传递到函数中并更改span元素的显示。当我使用 ID 时，它工作正常，但当我想传递类时，结果为 null。是否可以在 JS 函数中动态传递类名？

Answer 1

getElementsByClassName 返回一个集合，因此您需要遍历每个元素来分配样式。您还可以使用querySelector("."+ className)，它仅返回第一个匹配的元素。