Выделите активную «таблетку» - PullRequest
Новая
       16

Выделите активную «таблетку»

0 голосов
/ 11 апреля 2019

Я делаю таблетку-тумблер. Я также пытаюсь заставить "активную" таблетку изменить цвет. Вот часть кода, который у меня есть сейчас.

Мой 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;
}

1 Ответ

0 голосов
/ 11 апреля 2019

В 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>
...