как сделать так, чтобы контент отображался и скрывался по клику - PullRequest
Новая
       7

как сделать так, чтобы контент отображался и скрывался по клику

0 голосов
/ 13 октября 2018

У меня есть галерея изображений, и я пытаюсь сделать так, чтобы при нажатии на изображение отображалось различное содержимое в div.

Но я понятия не имею, как это сделать, и я пытаюсь найтиресурсы для помощи.

JSFiddle со стилем 

<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>

1 Ответ

0 голосов
/ 13 октября 2018

Используя jQuery, вы можете получить src тега clicked и поместить его в 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

...