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>

Java脚本

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解决方案！

最佳答案

    $(document).ready(function(){
     $(".opt").hide();
     $("button").click(function(){
       $("p").hide();
       class_nmae = $(this).attr('id');
       $("."+class_nmae).show();
     });
   }); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="option-one">option one</p>
    <p class="option-two opt">option two</p>
    <p class="option-three opt">option three</p>
    <p class="option-four opt">option four</p>

    <button id="option-one">one</button>
    <button id="option-two">two</button>
    <button id="option-three">three</button>
    <button id="option-four">four</button>

    <p class="option-one">option one</p>
    <p class="option-two opt">option two</p>
    <p class="option-three opt">option three</p>
    <p class="option-four opt">option four</p>

 you can use like this
    <p class="option-one">option one</p>
    <p class="option-two opt">option two</p>
    <p class="option-three opt">option three</p>
    <p class="option-four opt">option four</p>

    <button id="option-one">one</button>
    <button id="option-two">two</button>
    <button id="option-three">three</button>
    <button id="option-four">four</button>

    <p class="option-one">option one</p>
    <p class="option-two opt">option two</p>
    <p class="option-three opt">option three</p>
    <p class="option-four opt">option four</p>

    $(document).ready(function(){
     $(".opt").hide();
     $("button").click(function(){
       $("p").hide();
       class_nmae = $(this).attr('id');
       $("."+class_nmae).show();
     });
   });