Javascript 基于按钮单击显示隐藏内容

如何基于按钮单击显示/隐藏内容

我能够实现如下所示，但我的代码非常长，而且我确信有更好/更短的方法来实现

HTML

这是一张工作票

我不介意jQuery解决方案

$（文档）.ready（函数（）{
$（“.opt”）.hide（）；
$（“按钮”）。单击（函数（）{
$（“p”）.hide（）；
class_nmae=$（this.attr（'id'）；
$（“+class_nmae）.show（）；
});
}); 

选项一

选项二

选项三

选项四

一
二
三
四
选项一

选项二

选项三

选项四
在所有选项上都有一个公共类/选择器，用于隐藏所有选项

有选项特定的类显示，然后按需显示

在按钮上有一个公共类/选择器以添加事件侦听器（在本例中单击）

这样，无论您添加多少选项，它们仍然有效


var buttons=document.querySelectorAll（'.toggle btn'）；
按钮。forEach（功能（btn）{
btn.addEventListener（'click'，函数（evt）{
var按钮=evt.target；
var btnOption=button.getAttribute（'data-target'）；
汗发育（）；
显示选项（b选项）；
});
});
功能性汗发育（）{
document.querySelectorAll（'.options'）.forEach（函数（选项）{
option.style.display='none'；
});
}
功能显示选项（目标）{
document.querySelectorAll（目标）.forEach（函数（选项）{
option.style.display='block'；
})
}
//加载时显示第一个选项
按钮[0]。单击（）
选项一

选项二

选项三

选项四

一
二
三
四
选项一

选项二

选项三

选项四
一种不需要更改html的普通JavaScript解决方案：


让topTexts=document.querySelectorAll（'p[class$=“top”）；
让bottomText=document.querySelectorAll（'p[class$=“below”'）；
let buttons=document.queryselectoral（“按钮”）；
for（设i=0；i{
Array.from（topText）.map（（e，j）=>（e.hidden=i！==j））；
Array.from（bottomtext）.map（（e，j）=>（e.hidden=i！==j））；
};
}
按钮[0]。单击（）；
选项一

选项二

选项三

一
二
三
选项一

选项二

选项三

感谢大家提供的伟大解决方案

我最终使用@Neeraj-Amoli解决方案，并改进如下：

  <div class="upper-timeline">
   <p class="option-one" style="opacity: 0;">option one</p>
   <p class="option-two" style="opacity: 0;">option two</p>
   <p class="option-three" style="opacity: 0;">option three</p>
   <p class="option-four" style="opacity: 0;">option four</p>
  </div>
  <div class="buttons">
    <button id="option-one">one</button>
    <button id="option-two">two</button>
    <button id="option-three">three</button>
    <button id="option-four">four</button>
  </div>
  <div class="lower-timeline">
   <p class="option-one" style="opacity: 0;">option one</p>
   <p class="option-two" style="opacity: 0;">option two</p>
   <p class="option-three" style="opacity: 0;">option three</p>
   <p class="option-four" style="opacity: 0;">option four</p>
  </div>

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";
};

  <div class="upper-timeline">
   <p class="option-one" style="opacity: 0;">option one</p>
   <p class="option-two" style="opacity: 0;">option two</p>
   <p class="option-three" style="opacity: 0;">option three</p>
   <p class="option-four" style="opacity: 0;">option four</p>
  </div>
  <div class="buttons">
    <button id="option-one">one</button>
    <button id="option-two">two</button>
    <button id="option-three">three</button>
    <button id="option-four">four</button>
  </div>
  <div class="lower-timeline">
   <p class="option-one" style="opacity: 0;">option one</p>
   <p class="option-two" style="opacity: 0;">option two</p>
   <p class="option-three" style="opacity: 0;">option three</p>
   <p class="option-four" style="opacity: 0;">option four</p>
  </div>

    $(document).ready(function(){
     $("p").addClass("remove");
     $(".option-one").addClass("show");
     $("button").hover(function(){
       $("p").removeClass("show").addClass("remove");
       class_nmae = $(this).attr('id');
       $("."+class_nmae).removeClass("remove").addClass("show");
     });
   });