визуальный Div репозиции onclick css js

Question

визуальный Div репозиции onclick css js

0

Попытка визуально переместить два div с onclick всякий раз, когда нажимается каждый. Можно ли поменять весь CSS каждого div onclick для достижения этого эффекта?

Будет ли это рассматриваться как лучшая практика или есть лучший способ переставить контейнеры div.

Благодарю.

http://jsfiddle.net/Gx9B9/1/

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title>Lines</title>
</head>
<body>
<div id="box_a">
<div id="box_b">
</div>
<div id="box_g">
</div>
</div>
</div>
</div>
</body>
</html>

CSS

/* Wrap all Divs */

#box_a {
}

/* Background Div */
#box_b {
position: absolute;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
}

/* Foreground Div */

#box_g {
position: absolute;
top: 14.05%;
right: 20%;
bottom: 20%;
left: 20%;
background: white;
z-index: 99;
}

user3417759 14 март 2014, в 01:03

Источник

Теги:

javascript

html

css

1 ответ

Ещё вопросы

jadok · Answer 1 · 2014-03-13T22-22-00.000Z

Основывайте свой css на классе не на div id, после того как вам просто нужно изменить класс div, когда вы нажмете на него.

    function changeClass()
    {
      if (document.getElementById("box_b").className == 'first_css')
         document.getElementById("box_b").className = 'second_css';
      else
         document.getElementById("box_b").className = 'first_css';
    }

Я обновил его: http://jsfiddle.net/Gx9B9/2/

Быстрое выполнение: я пытаюсь изменить положение блоков (и их содержимого). Например: белое поле на черном поле -> щелкните белое поле -> положение двух переключателей (но сохраните все их исходное содержимое). Этот пример, кажется, переключает коробки, но не сохраняет дизайн коробки поверх коробки.
У меня есть обновление, jsfiddle.net/Gx9B9/13 , но вы можете делать то, что вы хотите сделать, просто применив определенный класс css к вашему div и изменив класс css, когда вы нажимаете на поле