+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: onclick.. divy zasłania diva itp. (/thread-onclick-divy-zaslania-diva-itp)
Strony:
1
2
onclick.. divy zasłania diva itp. - harvester2001 - 12-07-2012
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.
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;
}RE: onclick.. divy zasłania diva itp. - Kartofelek - 13-07-2012
Ja bym powiedział, że pewnie chodzi o z-index, ale nie powiem by nie było, że się wymądrzam.
RE: onclick.. divy zasłania diva itp. - harvester2001 - 13-07-2012
Menu z przycisków 1 , 2 , 3 , 4 klikając na nie wyświetla mi się pod spodem treść.
Jak klikam w menu od 1, 2, 3, 4 to treść pod spodem się zmienia.
Jednak gdy dojdę już do 4 przycisku i kliknę w 1 to nie pojawia mi się treść "ustawiona"
dla 1 tylko ciągle widać treść dla 4.
Wiem że troszkę to zawiłe dlatego wstawiłem kod bo tam lepiej widać.
RE: onclick.. divy zasłania diva itp. - Kartofelek - 13-07-2012
Powiedziałem wcześniej - z-index. 4,3,2 przysłania 1.
RE: onclick.. divy zasłania diva itp. - harvester2001 - 13-07-2012
(13-07-2012, 15:21)Kartofelek napisał(a): Powiedziałem wcześniej - z-index. 4,3,2 przysłania 1.Ok próbowałem ale jakoś nie wychodzi, może mi napiszesz jak ustawić z-index żeby zadziałało.
RE: onclick.. divy zasłania diva itp. - Kartofelek - 13-07-2012
elementy muszą mieć jakąś pozycję. Relatywną lub absolutną
{.....position:relative; z-index:.....}
Potem podczas kliknięcia wszystkim divom ustawiasz z-index niski, a wybranemu wysoki.
RE: onclick.. divy zasłania diva itp. - harvester2001 - 13-07-2012
tyle że ten sposób (który napisałem na górze) działa tylko w stronę od butona 1->2-> 3 a nie od 3->2-> 1. Myślałem że uda się go łatwo poprawić. Więc chyba skorzystam z rozwiązania Kornella.
Dzięki chłopaki za pomoc.
RE: onclick.. divy zasłania diva itp. - Kartofelek - 13-07-2012
To z z-index działa w każdą stronę. Właśnie w taki sposób tworzone jest 99% sliderów więc... No ale to zwyczajna logika
. Skoro jakiś div jest nad, a inny pod, to co byś nie robił z tym pod, to ten nad go przykryje. Dlatego musisz mu ustawić z-index
Kod:
function $(id) {
return document.getElementById(id);
}
var i = 4;
function setVisibility(id) {
$(id).style.zIndex = ++i;
}Można też inaczej:
Kod:
function $(id) {
return document.getElementById(id);
}
var i = 4;
function setVisibility(id) {
$('blok-1').style.display = 'none';
$('blok-2').style.display = 'none';
$('blok-3').style.display = 'none';
$(id).style.display = 'block';
}Reszty nie chce mi się komentować, jestem przemęczony. No ale naście błędów jest.