单击时显示和隐藏不同的信息

Question

我试图让右边的每个数字都有不同的信息，我希望它在点击一个数字时显示信息。非常感谢任何帮助，谢谢！

Answer 1

我假设您的网页看起来像这样 (HTML5)：

<p class="num">1</p>
<p class="num">2</p>
<p class="num">3</p>
<p class="num">4</p>
<h1 id="header">lorum ipsum</h1>
<p id="paragraph">lorum ipsum dolor sit amet</p>

我建议做这样的事情（JavaScript）：

var nums = document.getElementsByClassName("num");
var headers = ["1 header","2 header","3 header","4 header"];
var paragraphs = ["1 paragraph","2 paragraph","3 paragraph","4 paragraph"];

var a=0;
while(a<nums.length){
  nums[a].id = a.toString();
  nums[a].onclick = function(){
    document.getElementById("header").innerHTML = headers[parseInt(this.id)];
    document.getElementById("paragraph").innerHTML = paragraphs[parseInt(this.id)];
  };
  a++
}

Answer 2

只需使用 jQuery。

$(document).on('click', 'li', function(){
  let stage = $(this).attr('data-for');
  $('.stages > div').removeClass('active');
  $(`div[id=${stage}]`).addClass('active');
})

.container{
  width: 100%;
  height: 800px;
}
.left{
  width: 100px;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
}
.left > li{
  width: 100%;
  height: 100px;
  margin: 0 0 5px 0;
  text-align: center;
  border: 1px solid #000;
  cursor: pointer;
}
.right {
  width: calc(100% - 100px);
  height: 100%;
  float: left;
}
.stages{
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
}
.stages > div{
  width: 100%;
  height: 100%;
  position: absolute;
  left:0;
  top: 0;
  display: none;
  padding: 20px;
}
.stages > div.active{
  display: block;
}

<div class="container">
  <ul class="left">
     <li data-for="stage0">0</li>
     <li data-for="stage1">1</li>
     <li data-for="stage2">2</li>
  </ul>
  <div class='right'>
    <div class="stages">
      <div id="stage0" class="active">
        <h1>Stage 0</h1>
        <p>content...</p>
      </div>
      <div id="stage1">
        <h1>Stage 1</h1>
        <p>content...</p>
      </div>
      <div id="stage2">
        <h1>Stage 2</h1>
        <p>content...</p>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>