javascript - 根据按钮点击显示隐藏内容
问题描述
如何根据按钮点击显示/隐藏内容?
我能够实现这一点,如下所示,但我的代码很长,并且确信有更好/更短的方法来做到这一点。
HTML
<p class="option2-top">option two</p>
<p class="option3-top">option three</p>
<button id="option-one">one</button>
<button id="option-two">two</button>
<button id="option-three">three</button>
<p class="option1-below">option one</p>
<p class="option2-below">option two</p>
<p class="option3-below">option three</p>
Javascript
var oneTop = document.querySelector(".option1-top");
var twoTop = document.querySelector(".option2-top");
var threeTop = document.querySelector(".option3-top");
var oneBelow = document.querySelector(".option1-below");
var twoBelow = document.querySelector(".option2-below");
var threeBelow = document.querySelector(".option3-below");
oneTop.style.display = "block";
twoTop.style.display = "none";
threeTop.style.display = "none";
oneBelow.style.display = "block";
twoBelow.style.display = "none";
threeBelow.style.display = "none";
document.getElementById("option-one").onclick = function () {
oneTop.style.display = "block";
twoTop.style.display = "none";
threeTop.style.display = "none";
oneBelow.style.display = "block";
twoBelow.style.display = "none";
threeBelow.style.display = "none";
};
document.getElementById("option-two").onclick = function () {
oneTop.style.display = "none";
twoTop.style.display = "block";
threeTop.style.display = "none";
oneBelow.style.display = "none";
twoBelow.style.display = "block";
threeBelow.style.display = "none";
};
document.getElementById("option-three").onclick = function () {
oneTop.style.display = "none";
twoTop.style.display = "none";
threeTop.style.display = "block";
oneBelow.style.display = "none";
twoBelow.style.display = "none";
threeBelow.style.display = "block";
};
这是一个有效的JSfiddle
我不介意 jQuery 解决方案!
解决方案
vanilla JavaScript 中的一种可能的解决方案,不需要您更改 html:
let topTexts = document.querySelectorAll('p[class$="top"');
let bottomTexts = document.querySelectorAll('p[class$="below"');
let buttons = document.querySelectorAll("button");
for(let i = 0; i < buttons.length; i++) {
buttons[i].onclick = () => {
Array.from(topTexts).map((e, j) => (e.hidden = i !== j));
Array.from(bottomTexts).map((e, j) => (e.hidden = i !== j));
};
}
buttons[0].click();
<p class="option1-top">option one</p>
<p class="option2-top">option two</p>
<p class="option3-top">option three</p>
<button id="option-one">one</button>
<button id="option-two">two</button>
<button id="option-three">three</button>
<p class="option1-below">option one</p>
<p class="option2-below">option two</p>
<p class="option3-below">option three</p>