Javascript-форум - смещение блоков при клике

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - смещение блоков при клике (https://javascript.ru/forum/misc/53407-smeshhenie-blokov-pri-klike.html)

рони, а теперь быстро покликай по всем табам. :)

Надоели вы уже все со своим jQuery, лучше всё на CSS3 делать. :)

Ruslan_xDD,
1. это макет 2. это вопрос к тс что он всё-таки ищет первый вариант или второй или неугадал? 3. да это можно сделать без js

спасибо! оно

а без js не подскажете как сделать?

maximamus,
три input radio - ниже 3 label (это табы) - остальное css привязано какой input выбран.
тот же способ тут
http://css-live.ru/Primer/slider-css/slider-css.html

а тут уже ничего не перемещается как в вашем примере (9е сообщение) в этой теме

maximamus,
не совсем то но похоже )))

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div  {

     width: 200px;
     height: 100px;

  }
  .tab1 {
    background: #FFCC00;

  }
  .tab2{
    background: #66CC66;

  }
  .tab3 {
     background: #3399CC;

  }

label {
   transition: all 0.8s ease-out;
   width: 200px;
     height: 100px;
     position:  absolute;
     left :0;
     top: 10px;
     border: #FF3300 1px solid;
}

#slide1:checked ~ label:nth-of-type(1),
#slide2:checked ~ label:nth-of-type(2),
#slide3:checked ~ label:nth-of-type(3){
    left: 200px;
}

#slide1:checked ~ label:nth-of-type(3){
  left: 400px;
}
#slide1:checked ~ label:nth-of-type(2){
  left: 0px;
}
#slide2:checked ~ label:nth-of-type(1){
  left: 0px;
}

#slide2:checked ~ label:nth-of-type(3){
  left: 400px;
}

#slide3:checked ~ label:nth-of-type(2){
  left: 400px;
}

#slide3:checked ~ label:nth-of-type(1){
  left: 0px;
}
input{
   display: none;
}

  </style>

</head>

<body>
    <input type=radio name=slider id=slide1 />
	<input checked type=radio name=slider id=slide2 />
	<input type=radio name=slider id=slide3 />
    <label for=slide1><div class='tab1'>1</div></label>
	<label for=slide2><div class='tab2'>2</div></label>
	<label for=slide3><div class='tab3'>3</div></label>
</body>
</html>

гуд джоб)))) спасибо! попробую сейчас реализовать

Извращенцы. :)