nicht angemeldet
Hallo,
ich versuche gerade eine Tabnavigationsleiste mit Javascript zu realisieren. Derzeit klappt es auch ganz gut, allerdings nur, wenn die display Eigenschaft der content divs "vor Ort" auf none gesetzt wird. Sofern ich #content1, #content2, #content3, #content4 {display:none;} verwende funktioniert es nicht.
Woran liegt das?
Es folgt der Code. Vielen Dank!!!
********
<html><head><title>Test</title>
<script type="text/javascript">
function tabswitch(id, anzahl)
{
if(document.getElementById(id).style.display=="none")
{
for(i=1;i<=anzahl;i++)
{
document.getElementById("content" + i).style.display="none";
}
document.getElementById(id).style.display="block";
}
}
</script>
<style type="text/css">
html{
height : 100%;
margin-bottom : 1px;
}
body {
margin-left : 1em;
height : 100%;
}
#tabbar{
margin : 0;
padding : 0;
border : 1px solid #000000;
}
#tabbar ul{
list-style-type : none;
margin : 0;
padding : 0;
width : 20em;
}
#tabbar li{
border : 1px solid #000000;
width : 4em;
float : left;
margin : 0 0 0 .5em;
display : inline;
}
#tabbar li a{
margin : 0.1em;
text-decoration : none;
display : block;
}
#content {
clear:left;
}
</style>
</head>
<body>
<div id=tabbar>
<ul>
<li><a href="#" onclick="tabswitch('content1', '4')">text1</a></li>
<li><a href="#" onclick="tabswitch('content2', '4')">text2</a></li>
<li><a href="#" onclick="tabswitch('content3', '4')">text3</a></li>
<li><a href="#" onclick="tabswitch('content4', '4')">text4</a></li>
</ul>
</div>
<div id=content>
<div id="content1" style="display:none;">1</div>
<div id="content2" style="display:none;">2</div>
<div id="content3" style="display:none;">3</div>
<div id="content4" style="display:none;">4
</div>
</div>
</body>
Gunnar Bittersmann