nicht angemeldet
hi ich verzweifle langsam...
ich bastle seit stunden an einem tabmenü rum...
vielmehr... ich wär schon viel weiter aber der z-index der DIV´s die ich für das tabmenü benutze ändert sich nicht, der der dazugehörigen pages(gesonderte divs) lässt sich jedoch ohne probleme ändern...
hier ein link in aktion:
http://testversion01.te.funpic.de/mycontrolls/tabs2.html (das reingleitende layer ist werbung, leider freehoster, sorry)
hier der code zum drüberschauen
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>test</title>
<script type="text/javascript" language="JavaScript">
function showPage(num){
for(var i = 0;i < 3;i++) {
if(num == i) {
document.getElementById("page" + i).style.zIndex = 1;
document.getElementById("tab" + i).style.zIndex = 1;
document.getElementById("tab" + i).style.backGround.url="tab_active.png";
} else {
document.getElementById("page" + i).style.zIndex = 0;
document.getElementById("tab" + i).style.zIndex = 0;
}
}
}
</script>
<style type="text/css">
#completeform{text-align:center}
#tabs{width:400px;position:absolute;top:0px;height:25px;background-color:#ffffff}
.pge{
border-right:white 2px outset;
border-top:white 2px outset;
border-left:white 2px outset;
width:400px;
border-bottom: white 2px outset;
position:absolute;
top:25px;
height:200px;
background-color:#ffffff}
#tabs div {
float: left; text-align: center;
}
#tabs div a {
display: block;
margin-left: -8px;
width: 81px;
height: 24px;
background: url(tab.png)
no-repeat;
font-family:
tahoma, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #617289;
line-height: 24px;
}
#tabs div a:hover {background: url(tab2.png) no-repeat;}
#tabs div a.active {background: url(tab_active.png) no-repeat; cursor: default;}
</style>
</head>
<body>
<div id="tabs">
<div id="tab0" value="Page 1" name="tab0"><a class="active" style="z-index: 1;" onclick="showPage(0)">----tab 1----</a></div>
<div id="tab1" value="Page 2" name="tab1"><a style="z-index: 0;" onclick="showPage(1)">----tab 2----</a></div>
<div id="tab2" value="Page 3" name="tab2"><a style="z-index: 0;" onclick="showPage(2)">----tab 3----</a></div>
</div>
<div id="page0" class="pge" style="z-index: 1;">
<h1>seite1</h1>
</div>
<div id="page1" class="pge" style="z-index: 0;">
<h1>seite2</h1>
</div>
<div id="page2" class="pge" style="z-index: 0;">
<h1>seite3</h1>
</div>
</body>
</html>
[/CODE]
MudGuard