javascript - 突出显示活跃的“药丸”
问题描述
我正在制作一个药丸切换杆。我还试图让“活性”药丸改变颜色。这是我现在拥有的一些代码。
我的 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;
}
解决方案
获取作为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>
推荐阅读
- autodesk-forge - 如何更改停靠面板的标题
- python - 在浏览器中查找 API 命中计数和资源下载大小
- java - 使用桶排序创建降序的 Java 程序
- java - 如何在 HTML Java 中的较大元素中查找特定元素
- ruby-on-rails - Chef 客户端运行 root.sh 以获取 NMO setuid 状态
- angular - Angular Datepicker 分别显示月份和年份
- python - 如何使用 SQLAlchemy 将 Pandas DataFrame 插入 MySQL
- python - 一次显示多个小部件时,PyQt 冻结
- vue.js - 在 vue.js 中默认输入类型为月份的当前月份
- ip - IP 封锁和灯塔