nicht angemeldet
ich hätte da mal was reichlich eigenartiges: ein script dass im IE funktioniert, aber in keinem ordentlichen browser (firefox, opera) und ich finde den fehler einfach nicht...
danke an jeden, der sich da mal ran macht.
es geht um ein tab-layout, hier der quellcode:
(bislang funzt es im ff bis zum retrieve des alten 'active', aber dann hapert es an der zuweisung des neuen 'active')
<html>
<head>
<title></title>
<style type="text/css">
<!--
.tab {width:80px; line-height:25px; height:25px; padding:2px; border:1px solid gray; border-bottom:none; background:white; float:left;}
.hover, .active, .tabinfo {border:1px solid black; background:#B3E3B5; cursor:pointer;}
.hover, .active {border-bottom:none;}
.active, .tabinfo {cursor:default;}
.tabinfo {padding:3px; position:relative; display:none;}
.show {display:block;}
.nobor {width:78px; height:1px; background:#b3e3b5; position:absolute; top:0px; font-size:1px;}
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<script type="text/javascript">
<!--
function ap (id,mode,child) {
var id,mode,child;
var p = document.getElementById(id).className;
if (mode == '+') {
if (child == 'active') {
/* retrieve 'active'/'show' per schleife durch alle id='tab+i' */
for (i = 1; i <= document.getElementById('tabmenu').childNodes.length; i++) {
/* tabs oben */
if (document.getElementById('tab'+i).className == 'tab active') {
var ta = document.getElementById('tab'+i).className.replace(/ active/g,""); /* tmp-var a (kein replace im cmd mgl) */
document.getElementById('tab'+i).className = ta; /* wertzuweisung */
}
else {};
/* tabinfo unten */
if (document.getElementById('ntab'+i).className == 'tabinfo show') {
var tb = document.getElementById('ntab'+i).className.replace(/ show/g,""); /* tmp-var b (kein replace im cmd mgl) */
document.getElementById('ntab'+i).className = tb; /* wertzuweisung */
}
else {};
}
var tc = document.getElementById('n'+id).className;
document.getElementById('n'+id).className = tc + ' show'; /*<-- hier scheints zu haken */
}
document.getElementById(id).className = p +' '+ child; /*<-- hier scheints zu haken */
}
if (mode == '-') {
if (child == 'hover') {
var pn = document.getElementById(id).className.replace(/ hover/g,"");
document.getElementById(id).className = pn;
}
else {};
}
else {};
}
//-->
</script>
<noscript>JS aktivieren</noscript>
<table border="0">
<tr>
<td id="frame" width="611"><!--left-->
<div id="tabmenu">
<div id="tab1" title="zur Rubrik 1" class="tab active" onclick="ap('tab1','+','active');" onmouseover="ap('tab1','+','hover');" onmouseout="ap('tab1','-','hover');">Tab 1</div>
<div id="tab2" title="zur Rubrik 2" class="tab" onclick="ap('tab2','+','active');" onmouseover="ap('tab2','+','hover');" onmouseout="ap('tab2','-','hover');">Tab 2</div>
<div id="tab3" title="zur Rubrik 3" class="tab" onclick="ap('tab3','+','active');" onmouseover="ap('tab3','+','hover');" onmouseout="ap('tab3','-','hover');">Tab 3</div>
<div id="tab4" title="zur Rubrik 4" class="tab" onclick="ap('tab4','+','active');" onmouseover="ap('tab4','+','hover');" onmouseout="ap('tab4','-','hover');">Tab 4</div>
<div id="tab5" title="zur Rubrik 5" class="tab" onclick="ap('tab5','+','active');" onmouseover="ap('tab5','+','hover');" onmouseout="ap('tab5','-','hover');">Tab 5</div>
<div id="tab6" title="zur Rubrik 6" class="tab" onclick="ap('tab6','+','active');" onmouseover="ap('tab6','+','hover');" onmouseout="ap('tab6','-','hover');">Tab 6</div>
<div id="tab7" title="zur Rubrik 7" class="tab" onclick="ap('tab7','+','active');" onmouseover="ap('tab7','+','hover');" onmouseout="ap('tab7','-','hover');">Tab 7</div>
</div>
<br clear="all">
<div id="ntab1" class="tabinfo show"><span class="nobor" style="left:-3px;"> </span>
<pre>per js auf klassen zugreifen:
- append, substract 'active' res 'hover' via onmouseover res out
- append, substract 'show' via onclick zu zugehörigem tabinfo:
- find obj with class 'active' > id ermitteln
- substract from obj via id
- append to new active obj</pre>
</div>
<div id="ntab2" class="tabinfo"><span class="nobor" style="left:77px;"> </span>
</div>
<div id="ntab3" class="tabinfo"><span class="nobor" style="left:157px;"> </span>
</div>
<div id="ntab4" class="tabinfo"><span class="nobor" style="left:237px;"> </span>
</div>
<div id="ntab5" class="tabinfo"><span class="nobor" style="left:317px;"> </span>
</div>
<div id="ntab6" class="tabinfo"><span class="nobor" style="left:397px;"> </span>
</div>
<div id="ntab7" class="tabinfo"><span class="nobor" style="left:477px;"> </span>
</div>
</td>
<td width="211"><!--right-->
</td>
</tr>
</table>
</body>
</html>