突出显示活跃的“药丸”答案

【问题标题】：Highlight active "pill"突出显示活跃的“药丸”
【发布时间】：2019-04-12 04:08:22
【问题描述】：

我正在制作一个药丸切换杆。我还试图让“活性”药丸改变颜色。这是我现在拥有的一些代码。

我的 HTML 如下所示：

<div class="tab">
    <button class="tablink" onclick="openPage('infoKond', this, 'red')">Info</button>
    <button class="tablink" onclick="openPage('2ukerKond', this, 'blue')">1 uke</button>
    <button class="tablink" onclick="openPage('24timerKond', this, 'orange')">24 timer</button>
    <button class="tablink" onclick="openPage('tiSisteKond', this, 'green')" id="defaultOpen">Ti siste</button>
</div>
<div class="graf">
    <div id="infoKond" class="tabcontent"></div>
    <div id="tiSisteKond" class="tabcontent">
        <canvas id="kondChart10"></canvas>
    </div>
    <div id="2ukerKond" class="tabcontent">
        <canvas id="kondChart7"></canvas>
    </div>
    <div id="24timerKond" class="tabcontent">
        <canvas id="kondChart24"></canvas>
    </div>
</div>

我的 JS 代码如下所示：

function openPage(pageName) {
    // Hide all elements with class="tabcontent" by default */
    var i, tabcontent;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Show the specific tab content
    document.getElementById(pageName).style.display = "block";
    document.getElementsByClassName("active");
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

我的 CSS 看起来像这样：

.tablink {
    border: solid 1px #e0e0e0;
    margin-right: 5px;
    color: #999898;
}
.active .tablink:hover {
    transition: all 0.6s ease 0s;
    color: #282828;
    border: solid 1px #282828;
}

【问题讨论】：

标签： javascript tabs highlight

【解决方案1】：

在openPage 中获取所有作为参数传递给它们的实例和颜色。首先，重置应用于选项卡的颜色，然后仅在活动选项卡上应用颜色，如下面的代码所示。

function openPage(pageName, instance, colorName) {
    let tabLink = document.getElementsByClassName("tablink");
    for (let i = 0; i < tabLink.length; i++) {
        tabLink[i].style.color = "";
    }

    instance.style.color = colorName;
    // Hide all elements with class="tabcontent" by default */
    var i, tabcontent;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Show the specific tab content
    document.getElementById(pageName).style.display = "block";
    document.getElementsByClassName("active");
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

.tablink {
    border: solid 1px #e0e0e0;
    margin-right: 5px;
    color: #999898;
}
.active .tablink:hover {
    transition: all 0.6s ease 0s;
    color: #282828;
    border: solid 1px #282828;
}

<div class="tab">
    <button class="tablink" onclick="openPage('infoKond', this, 'red')">Info</button>
    <button class="tablink" onclick="openPage('2ukerKond', this, 'blue')">1 uke</button>
    <button class="tablink" onclick="openPage('24timerKond', this, 'orange')">24 timer</button>
    <button class="tablink" onclick="openPage('tiSisteKond', this, 'green')" id="defaultOpen">Ti siste</button>
</div>
<div class="graf">
    <div id="infoKond" class="tabcontent"></div>
    <div id="tiSisteKond" class="tabcontent">
        <canvas id="kondChart10"></canvas>
    </div>
    <div id="2ukerKond" class="tabcontent">
        <canvas id="kondChart7"></canvas>
    </div>
    <div id="24timerKond" class="tabcontent">
        <canvas id="kondChart24"></canvas>
    </div>
</div>

【讨论】：