links öffnen erst mit zweitem Klick und schließen nicht selbständig...

B

blacksoul5

Grünschnabel
Liebe Forumsgemneinde, habe folgendes Problem, die Links öffnen beim ersten Aufruf erst mit dem zweiten klick, bei klick auf den nächsten Link schliest der erste link nicht sondern die div wird darunter neu geladen? Wer hat mir einen Tip?

<head>
<style type="text/css">

div.transbox
{
width:670px;
height:280px;
margin:10px 10px;
background-color:#535353;
border:1px solid white;
/* for IE */
filter:alpha(opacity=80);
/* CSS3 standard */
opacity:0.8;
}
div.transbox p
{
margin:10px 10px;
color:#FFFFFF;
font-size: 17px;
text-align:justify;
font-family: arial,tahoma,verdana,helvetica, sans-serif;
}
</style>
</head>

/*Ab Hier die hidden container im boy tag*/

<div class="hidden-container" id="text1"><div class="transbox">
<strong><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p></strong>
</div></div>
<div class="hidden-container" id="text2">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>&nbsp;</p></div></div>

<div class="hidden-container" id="text3"><div class="transbox">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p><img src="http://www.oeb-kennel.de/templates/Litfass/img/logo.gif" longdesc="http://www.oeb-kennel.de/templates/Litfass/img/logo.gif" /></p>

</div></div>

/*Ab Hier der Aufruf*/

<tr>
<td id="top3" ><table width="100%" align="center" id="menu1" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" width="20%"><a href="index.html" >Home</a></td>
<td class="trenn"><img src="images/pixelspace.gif" width="1" height="1" border="0" alt=""></td><td class="trenn2"><img src="images/pixelspace.gif" width="1" height="1" border="0" alt=""></td>

<td width="20%" align="center">
<a href="#" onclick='document.getElementById("text1").style.display = (document.getElementById("text1").style.display == "none")?"block":"none";'>About me</a></td>
<td class="trenn"><img src="images/pixelspace.gif" width="1" height="1" border="0" alt=""></td> <td class="trenn2"><img src="images/pixelspace.gif" width="1" height="1" border="0" alt=""></td>

<td width="20%" align="center">
<a href="#" onclick='document.getElementById("text2").style.display = (document.getElementById("text2").style.display == "none")?"block":"none";'>Links / Shows</a></td>
<td class="trenn"><img src="images/pixelspace.gif" width="1" height="1" border="0" alt=""></td><td class="trenn2"><img src="images/pixelspace.gif" width="1" height="1" border="0" alt=""></td>

<td width="20%" align="center">
<a href="#" onclick='document.getElementById("text3").style.display = (document.getElementById("text3").style.display == "none")?"block":"none";'>Planned Breedings</a></td>
<td class="trenn"><img src="images/pixelspace.gif" width="1" height="1" border="0" alt=""></td><td class="trenn2"><img src="images/pixelspace.gif" width="1" height="1" border="0" alt=""></td>

<td width="20%" align="center"><a href="mailto:XY@googlemail.com" >Contact</a></td>

</tr>
</table>
 
Das die anderen Texte zuklappen sollen, hast Du ja nicht mal hinterlegt. Folglich kann das auch nicht funktionieren. Ich würde an deiner Stelle das Auf- und Zuklappen in einer JavaScript-Funktion kapseln und über diese dann auch alle Texte erst Zuklappen und den einen gewünschten Text dann ausklappen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück