Question

我正在制作药丸棒。林还试图让“主动”药改变颜色。这是我现在拥有的一些代码。

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

Answer 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>

突出显示有效的“药丸”

1 个答案: