3

Не знаю JavaScript вообще. Только CSS и HTML. Помогите написать код, пожалуйста.

Допустим, у меня есть блок A

<div id="a"></div>

У него есть стиль

#a {width:100px; height:100px; position:absolute (или relative, не суть); top:0px}

При нажатии на этот блок нужно чтобы у него был

top:100px; left:50px

к примеру.

Насколько мне известно, средствами CSS можно лишь сделать так, чтобы на время нажатия на этот блок он перемещался, а когда отпустить кнопку мыши - он встанет на свое место. Как сделать, чтобы при клике на этот блок он переместился, а при еще одном клике встал назад? Очень, очень и очень желательно без JavaScript, ибо я его пока что ВООБЩЕ не знаю, если возможно. Если невозможно, помогите написать скрипт-шаблон, и хотя бы отдаленно расскажите какая команда за что отвечает. Спасибо большое, надеюсь поможете))

UPD Возможно сделать так, чтобы при клике у него менялись свойства? Или при клике вместо id="a" у него становился id="a1" ? Это возможно?

2 ответа 2

2

Уже тыщу раз отвечал на подобный вопрос:

HTML

<label class="switchable">
    <input type="checkbox" />
    <div id="a"></div>
</label>

CSS

#a {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left: 0;
    border: 1px solid black;
    transition: all 0.5s;
}
.switchable input {
    display:none;
}
.switchable input:checked+#a {
    top:100px;
    left:50px
}

http://jsfiddle.net/oceog/sFEH4/

фокус в использовании :checked и следующего за ним div.

ограничение способа - нельзя помещать в такой <div> никаких input

2
  • ...Спасибо, пригодилось...долго ищу! А как в таком случае сделать,чтобы по клику не один блок перемещался (менял стиль), а сразу 5-7 блоков.....при чем у каждого свой стиль... Надеюсь на помощь ибо Чайник я еще...а код нужен:)
    – user15746
    27 ноя 2013 в 9:45
  • во первых во вторых, используйте <label for> и switchable input:checked~.myotherblocks
    – zb'
    27 ноя 2013 в 11:34
1

Я бы посоветовал лучше переключать классы, а не менять конкретные свойства. Например, так jsFiddle. Я закомментировал второй вариант, который помимо того что переключает класс, меняет и id элемента.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.