Cкрыть и показать картинку при клике

105
09 сентября 2021, 00:00

есть 4 блока в каждом из которых находится картинка. Каким образом можно сделать так чтобы изначально не было видно изображений во всех четырех блоках, но при клике на блок появлялась картинка внутри него а при клике на другой блок картинка исчезала из предыдущего блока.

body{ 
text-align:center; 
font-size: 20px; 
} 
 
img{ 
width:100%; 
height:100%; 
}	 
 
.block-1{ 
border:1px solid red; 
padding: 10px; 
width: 300px; 
position:relative; 
margin:3%; 
}	 
 
.block-2{ 
border:1px solid red; 
padding: 10px; 
width: 300px; 
position:relative; 
margin:3%; 
}		 
 
.block-3{ 
border:1px solid red; 
padding: 10px; 
width: 300px; 
position:relative; 
margin:3%; 
} 
	 
.block-4{ 
border:1px solid red; 
padding: 10px; 
width: 300px; 
position:relative; 
margin:3%; 
} 
	 
	 
	
<div class="block-1"> 
 1 блок   
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/> 
</div> 
 
 
<div class="block-2">  
 2 блок     
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/> 
</div> 
 
 
<div class="block-3">   
 3 блок    
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/> 
</div> 
 
 
<div class="block-4">  
 4 блок     
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/> 
</div>

Answer 1

В смысле вот так?

$('img').hide(); 
$('div').click(function() { 
  $('img').each((i,c)=>c!=$(this).find('img')[0]?$(c).hide():$(c).toggle()); 
});
body { 
  text-align: center; 
  font-size: 20px; 
} 
 
img { 
  width: 100%; 
  height: 100%; 
} 
 
.block { 
  border: 1px solid red; 
  padding: 10px; 
  width: 300px; 
  position: relative; 
  margin: 3%; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="block"> 
  1 блок 
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" /> 
</div> 
 
<div class="block"> 
  2 блок 
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" /> 
</div> 
 
<div class="block"> 
  3 блок 
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" /> 
</div> 
 
<div class="block"> 
  4 блок 
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" /> 
</div>

Answer 2

$('div').click(function() { 
  $(this).find('img').toggle() 
});
body { 
  text-align: center; 
  font-size: 20px; 
} 
 
img { 
  width: 100%; 
  height: 100%; 
} 
 
div:hover { 
  cursor: pointer; 
} 
 
.block-1 { 
  border: 1px solid red; 
  padding: 10px; 
  width: 300px; 
  position: relative; 
  margin: 3%; 
} 
 
.block-2 { 
  border: 1px solid red; 
  padding: 10px; 
  width: 300px; 
  position: relative; 
  margin: 3%; 
} 
 
.block-3 { 
  border: 1px solid red; 
  padding: 10px; 
  width: 300px; 
  position: relative; 
  margin: 3%; 
} 
 
.block-4 { 
  border: 1px solid red; 
  padding: 10px; 
  width: 300px; 
  position: relative; 
  margin: 3%; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="block-1"> 
  1 блок 
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" /> 
</div> 
 
 
<div class="block-2"> 
  2 блок 
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" /> 
</div> 
 
 
<div class="block-3"> 
  3 блок 
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" /> 
</div> 
 
 
<div class="block-4"> 
  4 блок 
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" /> 
</div>

READ ALSO
Как правильно использовать созданный в css треугольник?
HTML

Как правильно использовать созданный в css треугольник?

Мне нужно сделать 4 треугольника в css, я делаю их через border примерно так:

 225
абсолютное позиционирование блока, css
HTML

абсолютное позиционирование блока, css

Не могу отпозиционировать блок (item) относительно именно тега bodyПроблема в том, что элементы block__2 и block__3 имеют свойство position:relative; И получается...

 117
Как в CSS сделать так, чтобы задача, в зависимости от приоретета отправлялась в разные блоки?
HTML

Как в CSS сделать так, чтобы задача, в зависимости от приоретета отправлялась в разные блоки?

Есть html файл, который отвечает за создание главного меню сайтаНа сайте отображаются задачи разного приоритета

 267
WPF: Как получить текст, выделенный в ячейке DataGrid?
c#

WPF: Как получить текст, выделенный в ячейке DataGrid?

Такая проблема: необходимо осуществить поиск по выделенному тексту, допустим, пользователь выделяет часть текста в ячейке и необходимо вывести...

 215