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

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

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

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

Ruslan_xDD,
есть лучше решение??))))

рони,
и вот последний вопрос, надеюсь))
можно ли сделать так, что бы сменялся только текст, а локи на месте оставались? я так понимаю для этого нужно lable всунуть в середину div'a?

Цитата:

Сообщение от maximamus

можно ли сделать так, что бы сменялся только текст, а локи на месте оставались?

ничего не понял

рони,
Сейчас, при нажатии смещается блок вместе с текстом.
Можно ли сделать так, что бы смещался только текст, а блок оставался на месте?

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: 0px;
}

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

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

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

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

#slide3:checked ~ div label:nth-of-type(1){
  left: 0px;
}
input{
   display: none;
}
.gr{
  width: 600px;
  position: relative;
   height: 100px;
    border: 5px #FF0033 solid;

}
.gr div{
  float:  left;
}

  </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 />
    <div class='gr'><label for=slide1><p>Lorem ipsum dolor sit amet, consectetur </p></label><div class='tab1'></div>
	<label for=slide2><p>Lorem ipsum dolor sit amet, consectetur </p></label><div class='tab2'></div>
	<label for=slide3><p>Lorem ipsum dolor sit amet, consectetur </p></label><div class='tab3'></div></div>
</body>
</html>

рони,
действительно профессор))) еще раз - огромное спасибо!

а вот чисто ради уже интереса, чистым css'ом, без применения импутов и лейбов, есть решение?

а то посмотрев кучу уроков, убедился, что 3 версия ну уж сииильно можная и решений есть куча, даже не прибегая js и прочих лишних элементов

Цитата:

Сообщение от maximamus

без применения импутов

а что у вас будет реагировать на клик ? или как запомнить состояние иначе?

Цитата:

Сообщение от рони (Сообщение 354820)

а что у вас будет реагировать на клик

у тебя действительно железные нервы :)
нашел в загашнике пример на клик без инпута
http://jsfiddle.net/vlasenkofedor/59T3Z/

Poznakomlus,
я сам в шоке от его нервов) не часто встретишь такого "учителя"
извините конечно за наглость, подскажите пожалуйста, как этот пример реализовать в мою "головную боль"?(

Цитата:

Сообщение от maximamus

как этот пример реализовать

никак это только пример на клик без

Цитата:

Сообщение от рони

запомнить состояние