1. 首頁
  2. 問答
  3. visual div復位onclick css js

visual div復位onclick css js

2014-03-13 42 views
0

試圖在每次點擊時用onclick在視覺上重新定位兩個div。 是否可以交換每個div onclick的完整CSS來實現這種效果？visual div復位onclick css js

這是否被認爲是最佳做法或是否有更好的方法來重新安排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; 
}

來源

2014-03-13 user3417759

回答

0

基地你的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/

來源

2014-03-14 00:40:01 jadok

+0

快速跟進：我所試圖做的是開關盒的位​​置（和它們的內容）。像：黑框上的白框 - >單擊白框 - >兩個開關位置（但保留所有原始內容）。這個例子似乎改變了盒子，但並沒有將盒子的設計保留在盒子的頂部。 – user3417759

+0

我有更新，http://jsfiddle.net/Gx9B9/13/，但你可以做你想做的事情，只需要將一個特定的CSS類應用到你的div並改變CSS類，當你點擊框 – jadok

相關問題

 相關問題