javascript - 如何使用按钮（不是手风琴）隐藏多个部分并在 Elementor 中仅显示一个部分？

Question

我在 Elementor 中有多个 ID 为 #section1、#section2、#section3 等的部分......我创建了按钮，每个按钮的功能应该只显示一个部分并隐藏所有其他部分。我只能用 JS 对 1 个部分和 1 个按钮执行此操作，但似乎我对多个部分并不成功。我需要这样做而不刷新页面。有任何想法吗？

标签： javascriptcsswordpresselementor

Answer 1

不确定这是否是您想要的，但似乎对我有用

enter code here

`enter code here`</div>
`enter code here`<div id="section2">

`enter code here`</div>

`enter code here`<button class="section1">button1</button>
`enter code here`<button class="secss">button2</button>

使用自己的样式

javascript enter code here“使用严格”；

enter code hereconst btn1 = document.querySelector(".section1"); enter code hereconst btn2 = document.querySelector(".secss");

enter code here常量 section1 = document.getElementById("section1"); enter code here常量 section2 = document.getElementById("section2");

enter code herebtn1.addEventListener("click", function() { enter code heresection1.classList.add("hidden"); enter code here});

enter code herebtn2.addEventListener("click", function() { enter code heresection1.classList.remove("hidden"); enter code heresection2.classList.add("hidden"); enter code here});