javascript - 如何让内容根据点击显示和隐藏内容

Question

我有一个图片库，我正在尝试使用它，所以当点击图片时，它会在一个 div 中显示不同的内容。

但我不知道如何做到这一点并且努力寻找资源来提供帮助。

JSFiddle with styling

<div id="user-list">
  <div id="users">
    <img src="https://picsum.photos/200?image=1058" alt="User 1" class="user">
    <img src="https://picsum.photos/200?image=1062" alt="User 2" class="user">
    <img src="https://picsum.photos/200?image=1055" alt="User 3" class="user">
    <img src="https://picsum.photos/200?image=1045" alt="User 4" class="user">
    <img src="https://picsum.photos/200?image=1041" alt="User 5" class="user">
  </div>

  <div id="user-info">
    <img src="https://picsum.photos/300?image=1042" alt="User">
    <h3 class="title">Username</h3>
    <div class="btn-area">
      <a href="#" id="btn-1">BTN 1</a>
      <a href="#" id="btn-2">BTN 2</a>
      <a href="#" id="btn-3">BTN 3</a>
    </div>
    <div id="user-stats">
      <h4>Stat 1</h4>
      <p>1024</p>
      <h4>Stat 2</h4>
      <p>50%</p>
    </div>
  </div>
</div>

Answer 1

使用 jQuery，您可以获得点击标签的 src 并将其放入您想要的元素的 src 中，如下所示:

$(".user").click(function(){
    $("#user-info img").attr('src',  $(this).attr('src'));
})

https://jsfiddle.net/rezaxdi/qycz5rh1

您可以对您想要的任何其他内容执行相同的操作，例如根据单击的元素 alt 属性隐藏和显示内容(只是向某些元素添加了 user-1 和 user-2 类):

$(".user").click(function(){
    $("#user-info img").attr('src',  $(this).attr('src'));
  if($(this).attr('alt') == "User 1" || $(this).attr('alt') == "User 2"){
    $(".user-1").show();
    $(".user-2").hide();
  }
  else if($(this).attr('alt') == "User 3" || $(this).attr('alt') == "User 4"){
    $(".user-1").hide();
    $(".user-2").show();
  }
  else{
    $(".user-1").show();
    $(".user-2").show();
  }
})

https://jsfiddle.net/rezaxdi/g0vbdzmc