12-07-2012, 21:44
Witam
Mam taki problem:
jak klikam w button1 to pojawia mi się pod spodem div zielony, jak klikam button1
to kolejny div czerwony się pojawia w tym miejscu i analogicznie z buttonem3 (divy się zasłaniają nawzajem).
Jednak gdy znów klikam w button1 to nie przeskakuje mi na zielony div tylko ciągle jest ten div który kliknąłem ostatni. Tak jakbym mógł się poruszać do przodu ale nie mógłbym się cofnąć (w przykładzie lepiej to widać).
Bardzo ale to bardzo proszę o pomoc.
CSS
Mam taki problem:
jak klikam w button1 to pojawia mi się pod spodem div zielony, jak klikam button1
to kolejny div czerwony się pojawia w tym miejscu i analogicznie z buttonem3 (divy się zasłaniają nawzajem).
Jednak gdy znów klikam w button1 to nie przeskakuje mi na zielony div tylko ciągle jest ten div który kliknąłem ostatni. Tak jakbym mógł się poruszać do przodu ale nie mógłbym się cofnąć (w przykładzie lepiej to widać).
Bardzo ale to bardzo proszę o pomoc.
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
function setVisibility(id, visibility)
{
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body >
<div id="buttons">
<input type=button name=type class='button' value='button_1' onclick="setVisibility('box-1', 'inline');";>
<input type=button name=type class='button' value='button_2' onclick="setVisibility('box-2', 'inline');";>
<input type=button name=type class='button' value='button_3' onclick="setVisibility('box-3', 'inline');";>
</div>
<div id="boxs">
<div id="box-1">Message Box</div>
<div id="box-2">Message Box</div>
<div id="box-3">Message Box</div>
</div>
</body>
</html>CSS
Kod:
#buttons{
height: 30px;
}
#boxs{
margin-top: 20px;
}
#box-1{
background-color: red;
color: black;
display: none;
height: 80px;
position: absolute;
width: 400px;
}
#box-2{
background-color: green;
color: black;
display: none;
height: 80px;
position: absolute;
width: 400px;
}
#box-3{
background-color: grey;
color: black;
display: none;
height: 80px;
position: absolute;
width: 400px;
}