gpt4 book ai didi

JavaScript Tabs 替换类

转载 作者:行者123 更新时间:2023-11-28 14:57:22 25 4
gpt4 key购买 nike

我在 CSS 中为每个选项卡创建了不同的类,并为每个选项卡添加了样式 - 背景颜色。我编写了一个 JavaScipt 代码来遍历每个选项卡并显示该选项卡的适当内容。

在我的 CSS 中,我还创建了另一个类 (.now-active) 并添加了样式 - 事件选项卡的背景颜色(在类 .now-active 中),它将被我的 JavaScript 代码调用和使用。到目前为止一切正常。

问题:我希望上面 .now-active 类中的背景颜色样式(仅由我的 JavaScript onClick 函数调用)替换当前事件选项卡的初始样式(背景颜色)。

这是每个选项卡的 CSS 类:

 /* Set CSS property for every button */
.tab button.all{
background-color: #fff !important;
color: #000 !important;
}

.tab button.assessment{
background-color: #616161 !important;
color: #fff !important;
}

.tab button.games{
background-color: #00bcd4 !important;
color: #000 !important;
}

.tab button.assignment{
background-color: #607d8b !important;
color: #fff !important;
}

.tab button.practice{
background-color: #009688 !important;
color: #fff !important;
}

这是 JavaScript 代码使用的事件选项卡的 CSS:

/* Create an active/current tablink class */
.tab button.now-active {
background-color: green;
}

这是我用于操作选项卡的 JavaScript 代码:

function openTab(evt, Tab) {
var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" now-active", "");
}

var now_active = document.getElementsByClassName("now-active");

document.getElementById(Tab).style.display = "block"
evt.currentTarget.className += " now-active";
}

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

最后这是我的 HTML:

  <div class="penfs-bar hover-text tab penfs-hide-small penfs-hide-medium">
<button class="tablinks all" onclick="openTab(event, 'All')" id="defaultOpen" style="width:20%">
<p class="penfs-text-blue">View All</p>
</button>

<button class="tablinks assessment" onclick="openTab(event, 'Assessment')" style="width:20%">
<p class="penfs-text-white">Assessment</p>
</button>

<button class="tablinks games" onclick="openTab(event, 'Games')" style="width:20%">
<p class="penfs-text-white">Play Games</p>
</button>

<button class="tablinks assignment" onclick="openTab(event, 'Assignment')" style="width:20%">
<p class="penfs-text-white">Assignment</p>
</button>

<button class="tablinks practice" onclick="openTab(event, 'Practice')" style="width:20%">
<p class="penfs-text-white">Practice</p>
</button>
</div>

我尝试过的方法:split()、replace()、removeClass()..也许我没有以正确的方式使用它们。

请帮忙解决这个问题??

最佳答案

有几件事对你不利:

  1. openTab 函数中的第二项('Assignment'、'Practice')区分大小写——将其更改为小写将使文档获得正确的元素。

  2. 事件类名没有使用 !important 属性,而其他所有内容都使用了。

  3. getElementsByClassName 创建一个类似数组的对象,因此您需要遍历该对象或管理状态,以便通过如下方式只有 1 个元素:var clickedElement = document.getElementsByClassName(Tab)[0 ];

我剥离了所有其他内容并将其放入 codePen 中——希望这对您有所帮助:

function openTab(evt, Tab) {
var previousElement = document.getElementsByClassName('now-active')[0];
var clickedElement = document.getElementsByClassName(Tab)[0];

if(previousElement){
previousElement.classList.remove('now-active');
}

clickedElement.classList.add('now-active');

}

https://codepen.io/MathiasaurusRex/pen/ERNPBz

关于JavaScript Tabs 替换类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50751119/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com