Форум

msncom · #1 (**permalink**) 27.06.2016, 14:04

всем привет. помогите плиз! есть 3 картинки, по клику показывает div, относящийся к ней, и прячет другие.

<table width="100%">
<tr>
<td align="right"><a href="#div1" class="link"><img src="1.png" width="100" height="101" /></a></td>
<td align="center" width="20%"><a href="#div2" class="link"><img src="2.png" width="100" height="101" /></a></td>
<td align="left"><a href="#div3" class="link"><img src="3.png" width="100" height="101" /></a></td>
</tr>
</table>

<div class="bar" id="div1">
</div>

<div class="bar" id="div2">
</div>

<div class="bar" id="div3">
</div>

вот javascript

$('.link').on('click', function(e) {
		e.preventDefault();
		$('.bar').each(function() {
			$(this).css('display', 'none');
		});
		var block = $(this).attr('href');
		$(block).css('display', 'block');
	});

и css

#div2, #div3{display:none;
}

как добавить изменение opacity к картинкам? активный (1), скрытые - 0.5

рони · #2 (**permalink**) 27.06.2016, 14:26

msncom,
Открывашка 214 для модальных окон

msncom · #3 (**permalink**) 27.06.2016, 14:55

посмотрел тему, не понял как с помощью этого можно изменить прозрачность у картинок.
может не понятно написал в первом посте. но смысл следующий: сейчас есть 3 катинки. изначально показывает div1 (div2 и div3 - display:none), если кликнуть на вторую картинку, то показывает div2 (div1 и div3 - display:none), по третьей - виден div3 (div1 и div13 - display:none).
нужно дополнить изменение прозрачности у картинок. изначально 1.png opacity:1 (у 2.png и 3.png - opacity:0.5), кликнули по второй (показал div2), изменили opacity у картинки на 1 (у других сделали opacity:0.5) и т.д.

рони · #4 (**permalink**) 27.06.2016, 15:34

msncom,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .bar{
     display: none;
     height: 200px;
     border: rgb(255, 0, 255) solid 2px;
     background-color: rgb(34, 139, 34);
   }
   </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
 $(function(){
 var $link = $('.link'), $img = $('img', $link), $bar = $('.bar');
 $link.each(function(i, a){
       $(a).on('click', function(e) {
		e.preventDefault();
        $img.not($('img', a).fadeTo(0, 1)).fadeTo(0, 0.5);
        $bar.not($bar.eq(i).show()).hide()
        })
       }).eq(0).click();
})
  </script>
</head>

<body>
<table width="100%">
<tr>
<td align="right"><a href="#div1" class="link"><img src="http://i020.radikal.ru/1312/4e/59eef621bf6a.jpg" width="100" height="101" /></a></td>
<td align="center" width="20%"><a href="#div2" class="link"><img src="http://i020.radikal.ru/1312/4e/59eef621bf6a.jpg" width="100" height="101" /></a></td>
<td align="left"><a href="#div3" class="link"><img src="http://i020.radikal.ru/1312/4e/59eef621bf6a.jpg" width="100" height="101" /></a></td>
</tr>
</table>

<div class="bar" id="div1">1
</div>

<div class="bar" id="div2">2
</div>

<div class="bar" id="div3">3
</div>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript