✔ Javascript div einblenden und ausblenden

B

birnensaft

Grünschnabel
Hallo!
Ich habe nicht viel Ahnung von Javascript, habe mir ein fertiges Script hergenommen und an meine Bedürfnisse angepasst.
Es handelt sich um eine Einblend-/Ausblendfunktion. Das Script funktioniert einwandfrei, wenn ich auf Link A klicke, blendet der Text ein und bei nochmaligem Klick auf Link A blendet er wieder aus, genauso bei Link B.
Was ich jetzt noch bräuchte, ist, dass Text A automatisch ausblendet, wenn ich auf Link B klicke und umgekehrt, sodass immer nur 1 eingeblendeter Text sichtbar ist.
Auf meiner Seite gibt es 8 Listenpunkte, die einzublendende Texte beinhalten, und es soll eben immer nur 1 Text eingeblendet sein, alle anderen ausgeblendet.
Lässt sich das leicht mit diesem Script umsetzen? Wenn ja, wie?

Hier sind die Ausschnitte des Quelltexts:

<script type="text/javascript">
//<![CDATA[
function swap(openlink,closelink, linkid, dataid)
{
if( document.getElementById(dataid).style.display == 'none')
{
document.getElementById(dataid).style.display='inline';
document.getElementById(linkid).firstChild.nodeValue=closelink;
} else
{
document.getElementById(dataid).style.display='none';
document.getElementById(linkid).firstChild.nodeValue=openlink;
}
}
//]]>

</script>



<li><a href="#" onclick="javascript:swap('TextA','TextA', 'swaplinkta', 'hidemeta')" id="swaplinkta" onfocus="this.blur()" name="swaplinkta">LinkA</a></li>
<div id="hidemeta" style="display:none">
Einzublendender TextA<br>
</div><br>



<li><a href="#" onclick="javascript:swap('TextB','TextB', 'swaplinktb', 'hidemetb')" id="swaplinktb" onfocus="this.blur()" name="swaplinktb">LinkB</a></li>
<div id="hidemetb" style="display:none">
Einzublendender TextB<br>
</div><br>



Vielen Dank schon mal!
Lg birnensaft
 
Ein möglicher Lösungsansatz: http://jsfiddle.net/spicelab/cjz33Lbf/
Javascript: 
var text = new Array();
text[0] = 'hidemeta';
text[1] = 'hidemetb';
text[2] = 'hidemetc';
// text[3] = 'hidemetd';
// usw.

function toggle(id) {
  if(document.getElementById(id).style.display=="none") {
    for(i=0;i<text.length;i++) {
    document.getElementById(text[i]).style.display="none";
    }
    document.getElementById(id).style.display="block";
    }
    else {
    document.getElementById(id).style.display="none";
  }
}
HTML: 
<ul>
  <li>
    <a href="#" onclick="toggle('hidemeta')">Link A</a>
    <div id="hidemeta" style="display:none">Einzublendender Text A</div>
  </li>
  <li>
    <a href="#" onclick="toggle('hidemetb')">Link B</a>
    <div id="hidemetb" style="display:none">Einzublendender Text B</div>
  </li>
  <li>
    <a href="#" onclick="toggle('hidemetc')">Link C</a>
    <div id="hidemetc" style="display:none">Einzublendender Text C</div>
  </li>
  <!-- usw. -->
</ul>
 
Zuletzt bearbeitet:
Hallo SpaceLab!
Vielen Dank für deine rasche Antwort!
Habe deinen Code in meinen eingefügt, funktioniert aber leider nicht wie gewünscht. Wenn ich auf den Link klicke, verschwindet dieser (statt dass der einzublendende Text erscheint). Er ist dann auch nicht mehr anzuklicken (weil er ja weg ist). Könntest du da vielleicht nochmal drüber schauen? Vielen Dank nochmal!
Lg birnensaft
 
Hallo SpaceLab!

Ich hab jetzt ein bisschen herumprobiert. Dein Code allein funktioniert tatsächlich - vielen Dank dafür! Er funktioniert aber nicht, wenn ich ihn in meine Seite einbinde. Und ich habe rausgefunden, dass das daran liegt, dass ich im Quelltext noch andere javascript-elemente eingebunden habe (Aufruf eines Gästebuchs in einem lightwindow). Wenn ich diesen Code aus dem Quelltext lösche, funktioniert dein Code. Wenn er drin steht, funktioniert er nicht. Könntest du mir dabei auch noch helfen? Das wäre echt super!

Hier der Code vom Gästebuchaufruf:

Javascript: 
<script type="text/javascript" src="http://www.smoobook.de/javascript/scriptaculous/lib/prototype.js"></script><script type="text/javascript" src="http://www.smoobook.de/javascript/scriptaculous/src/scriptaculous.js?load=effects"></script>
script type="text/javascript" src="http://www.smoobook.de/javascript/lightwindow.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.smoobook.de/smoobook/css/lightwindow.css" />
<a href="http://www.smoobook.de/gb_thz/" title="THZ - Gästebuch" class="lightwindow" params="lightwindow_type=external,lightwindow_bordercolor=ffffff,lightwindow_width=620,lightwindow_height=500">Gästebuch</a>


(ich weiß nicht, ob das mit dem Code einfügen geklappt hat)
Liebe Grüße birnensaft
 
Mir ist derzeit nicht ganz klar, warum die Kombination der JavaScripts nicht funktionieren sollte. Was hat denn der Link zum Gästebuch-Aufruf mit den einzublendenen Texten zu tun?

Ist es möglich, einen Link zur Seite zu erhalten?
 
Okay, ich hab mir das eben in der Kaffeepause mit unseren beiden Codes in einer Testseite näher angeschaut. Das Prototype-Framework nutzt meinen frei gewählten Funktionsnamen "toggle" anderweitig, was zu dieser Komplikation führt.

Beispielsweise mit dem umbenannten Funktionsnamen "swap" läuft alles rund :)

Meine geänderte Fassung: http://jsfiddle.net/spicelab/1kye2s1s/
Javascript: 
var text = new Array();
text[0] = 'hidemeta';
text[1] = 'hidemetb';
text[2] = 'hidemetc';
// text[3] = 'hidemetd';
// usw.

function swap(id) {
  if(document.getElementById(id).style.display=="none") {
    for(i=0;i<text.length;i++) {
    document.getElementById(text[i]).style.display="none";
    }
    document.getElementById(id).style.display="block";
    }
    else {
    document.getElementById(id).style.display="none";
  }
}
HTML: 
<ul>
  <li>
    <a href="#" onclick="swap('hidemeta')">Link A</a>
    <div id="hidemeta" style="display:none">Einzublendender Text A</div>
  </li>
  <li>
    <a href="#" onclick="swap('hidemetb')">Link B</a>
    <div id="hidemetb" style="display:none">Einzublendender Text B</div>
  </li>
  <li>
    <a href="#" onclick="swap('hidemetc')">Link C</a>
    <div id="hidemetc" style="display:none">Einzublendender Text C</div>
  </li>
  <!-- usw. -->
</ul>
[edit]jsfiddle-Demo ergänzt[/edit]​
 
Zuletzt bearbeitet:
Noch ein Sicherheitshinweis, den ich vorhin vergessen habe zu erwähnen: Bin mir nicht sicher, ob es sich hier nur um einen Kopierfehler handelt, aber in dieser Zeile fehlt zu Beginn die öffnende <-Klammer:

HTML: 
script type="text/javascript" src="http://www.smoobook.de/javascript/lightwindow.js"></script>
 
SUPER!!! Vielen Dank, jetzt funktioniert alles, wie es soll!
Die Klammer war scheinbar nur ein Kopierfehler...
Danke und lg birnensaft!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück