将类名传递给函数参数

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)它仅返回第一个匹配的元素。

Answer 2

var&nbsp;red&nbsp;=&nbsp;document.getElementByClassName('red')[0];