如何解决使用JS隐藏类似于tab table的手风琴内容
我让这段代码按照我想要的方式运行,只是我不希望有人一次能够打开多个“标签”。如果通过单击其按钮将其添加到另一个 div,我不确定如何让 Javascript 从当前拥有它的 div 中删除“transform-active”类。
function Slidein(num) {
var element = document.getElementById(num);
element.classList.toggle("transform-active");
}
.tabcontent {
background-color: #218D9B;
overflow: hidden;
height: 0px;
width: 600px;
}
.transform{
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 600px;
visibility: visible;
}
<button id="button1" onclick="Slidein('div1')">Button 1</button>
<button id="button2" onclick="Slidein('div2')">Button 2</button>
<button id="button3" onclick="Slidein('div3')">Button 3</button>
<div id="div1" class="tabcontent transform">
Here's some text in my FirsT div
</div>
<div id="div2" class="tabcontent transform">
This would be the SECOND div text
</div>
<div id="div3" class="tabcontent transform">
And Now we have a THIRD div with its text
</div>
解决方法
也许把 Slidein 改成这样:
function Slidein(num) {
var elementWithTransformActiveClass = document.querySelector('.transform-active');
var element = document.getElementById(num);
if (!!elementWithTransformActiveClass) elementWithTransformActiveClass.classList.remove("transform-active");
if (element !== elementWithTransformActiveClass) element.classList.add("transform-active");
}
编辑:
您可以访问活动按钮:
var buttonId = num.replace('div','button');
var button = document.getElementById(buttonId);
// and now you can add a new class to the button
button.classList.add('new-class');
function Slidein(num) {
var elementWithTransformActiveClass = document.querySelector('.transform-active');
var element = document.getElementById(num);
if (!!elementWithTransformActiveClass) elementWithTransformActiveClass.classList.remove("transform-active");
if (element !== elementWithTransformActiveClass) {
element.classList.add("transform-active");
var buttonId = num.replace('div','button');
var button = document.getElementById(buttonId);
// and now you can add a new class to the button
button.classList.add('new-class');
}
}
要查看可用于所有 HTML 元素的所有属性和方法,请访问:w3schools.com/jsref/dom_obj_all.asp
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。