Question

我有一个图片库，我正在尝试拥有它，因此单击图片时，它会在div中显示不同的内容。

但是我不知道该怎么做，而且还在努力寻找资源来寻求帮助。

<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，您可以获取clicked标签的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

如何使内容基于点击显示和隐藏内容

1 个答案: