只显示被点击卡片的内容

<div class="card" onclick="showContent(1)">
  <h3>Card 1</h3>
  <p>Card 1 content...</p>
</div>

<div class="card" onclick="showContent(2)">
  <h3>Card 2</h3>
  <p>Card 2 content...</p>
</div>

<div class="card" onclick="showContent(3)">
  <h3>Card 3</h3>
  <p>Card 3 content...</p>
</div>

<div id="content1" class="content hidden">
  <h3>Card 1 Content</h3>
  <p>Detailed content of Card 1...</p>
</div>

<div id="content2" class="content hidden">
  <h3>Card 2 Content</h3>
  <p>Detailed content of Card 2...</p>
</div>

<div id="content3" class="content hidden">
  <h3>Card 3 Content</h3>
  <p>Detailed content of Card 3...</p>
</div>

.hidden {
  display: none;
}

function showContent(cardNumber) {
  // 隐藏所有内容
  var contents = document.getElementsByClassName("content");
  for (var i = 0; i < contents.length; i++) {
    contents[i].classList.add("hidden");
  }
  
  // 显示被点击卡片的内容
  var content = document.getElementById("content" + cardNumber);
  content.classList.remove("hidden");
}