|
|
03.02.2015, 16:42
|
|
Аспирант
|
|
Регистрация: 29.01.2015
Сообщений: 81
|
|
|
Ruslan_xDD,
есть лучше решение??))))
рони,
и вот последний вопрос, надеюсь))
можно ли сделать так, что бы сменялся только текст, а локи на месте оставались? я так понимаю для этого нужно lable всунуть в середину div'a?
|
|
03.02.2015, 16:53
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Сообщение от maximamus
|
|
можно ли сделать так, что бы сменялся только текст, а локи на месте оставались?
|
ничего не понял |
|
03.02.2015, 17:15
|
|
Аспирант
|
|
Регистрация: 29.01.2015
Сообщений: 81
|
|
|
рони,
Сейчас, при нажатии смещается блок вместе с текстом.
Можно ли сделать так, что бы смещался только текст, а блок оставался на месте?
|
|
03.02.2015, 17:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
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>
|
|
03.02.2015, 17:41
|
|
Аспирант
|
|
Регистрация: 29.01.2015
Сообщений: 81
|
|
|
рони,
действительно профессор))) еще раз - огромное спасибо!
|
|
03.02.2015, 22:37
|
|
Аспирант
|
|
Регистрация: 29.01.2015
Сообщений: 81
|
|
|
а вот чисто ради уже интереса, чистым css'ом, без применения импутов и лейбов, есть решение?
а то посмотрев кучу уроков, убедился, что 3 версия ну уж сииильно можная и решений есть куча, даже не прибегая js и прочих лишних элементов
|
|
03.02.2015, 22:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Сообщение от maximamus
|
|
без применения импутов
|
а что у вас будет реагировать на клик ? или как запомнить состояние иначе? |
|
03.02.2015, 23:59
|
 |
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
Сообщение от рони
|
|
а что у вас будет реагировать на клик
|
у тебя действительно железные нервы 
нашел в загашнике пример на клик без инпута
http://jsfiddle.net/vlasenkofedor/59T3Z/ |
|
04.02.2015, 01:17
|
|
Аспирант
|
|
Регистрация: 29.01.2015
Сообщений: 81
|
|
|
Poznakomlus,
я сам в шоке от его нервов) не часто встретишь такого "учителя"
извините конечно за наглость, подскажите пожалуйста, как этот пример реализовать в мою "головную боль"?(
|
|
04.02.2015, 09:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Сообщение от maximamus
|
|
как этот пример реализовать
|
никак это только пример на клик без
|
Сообщение от рони
|
|
запомнить состояние
|
|
|
|
|
