Text einblenden/ausblenden

kokli · 8 März 2010

Hallo ich weiß nicht mehr weiter und erbitte eure Hilfe.

Ich habe hier im Forum einen code (von White Window) zum ein bzw ausblenden von Texten gefunden.

HTML:

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function einblenden(div) {
  with(document.getElementById(div).style){
    if(display=="none"){
      display="inline";
    }
    else{
      display="none";
    }
  }
}
//-->
</script>
</head>
<body>
<a href="#" onClick="einblenden('ebene1'); return false;">  Ein-/Ausblenden </a>
<div id="ebene1" style="display:none;"><br>
  Bildtext Bildtext Bildtext Bildtext<br>
  Bildtext Bildtext Bildtext Bildtext<br>
  Bildtext Bildtext Bildtext Bildtext<br>
  Bildtext Bildtext Bildtext Bildtext<br>
  Bildtext Bildtext Bildtext Bildtext<br>
  Bildtext Bildtext Bildtext Bildtext<br>
</div>
</body>
</html>

Meine Frage ist nur ob man diesem Code noch Erweitern kann, sodass ein Text durch klick auf einen anderen link wieder verschwindet und ein neuer erscheint.

Ich habe sehr viel herum experiementiert, aber leider gelingt es nicht!

Ich hoffe ihr könnt mir helfen.

Mars@Gera · 8 März 2010

Was meinste denn mit anderen Text?

Gilles · 9 März 2010

Wow. Das with statement ist mir neu

Aber Das einblenden von neuen Texten ist nicht all zu schwer. Die texte sind einfach nur doof zu lagern, falls es längere texte sind. Wäre eher dafür dass du dafür ein 2. Element machst und dieses dafür einblenden lässt.

HTML:

<html>
  <head>
    <script language="JavaScript" type="text/javascript">
      <!--
      function alleAusblenden(){
        var elemente = document.getElementById("ebenen").getElementsByTagName("p");
        for (var i = 0; i < elemente.length; i++) {
          elemente[i].style.display = "none";
        }
      }
      
      function einblenden(div){
        alleAusblenden();
        document.getElementById(div).style.display = "inline";
      }
      
      //-->
    </script>
  </head>
  <body>
    <a href="#" onclick="einblenden('ebene1'); return false;"> Ein-/Ausblenden1 </a>
    <a href="#" onclick="einblenden('ebene2'); return false;"> Ein-/Ausblenden2 </a>
    <div id="ebenen">
      <p id="ebene1">
        <br>
        Bildtext Bildtext Bildtext Bildtext
        <br>
        Bildtext Bildtext Bildtext Bildtext
        <br>
        Bildtext Bildtext Bildtext Bildtext
        <br>
        Bildtext Bildtext Bildtext Bildtext
        <br>
        Bildtext Bildtext Bildtext Bildtext
        <br>
        Bildtext Bildtext Bildtext Bildtext
        <br>
      </p>
      <p id="ebene2" style="display:none;">
        Nur ein Test
      </p>
    </div>
  </body>
</html>

Hoffe das hilft dir ein wenig.
Aber professionell ist echt natürlich nicht :)
normalerweise macht man die sichtbarkeit über Klassennamen und stellt auch keine Eventhandler ins HTML ^^

kokli · 9 März 2010

Ja, genau sowas meinte ich. Ein großes Dankeschön!

Aber professionell ist echt natürlich nicht
normalerweise macht man die sichtbarkeit über Klassennamen und stellt auch keine Eventhandler ins HTML ^^

Solange es funktioniert^^ und das tut es! Danke

ogoogo · 4 September 2012

Die Sache entspricht fast meiner Spezifikation. Hier kann man zu mehreren Überschriften den jeweiligen Text einblenden

HTML:

<head>
    <script language="JavaScript" type="text/javascript">
      <!--
      function alleAusblenden(){
        var elemente = document.getElementById

("ebenen").getElementsByTagName("p");
        for (var i = 0; i < elemente.length; i++) {
          elemente[i].style.display = "none";
        }
      }
      
      function einblenden(div){
        alleAusblenden()
        document.getElementById(div).style.display = 

"inline";
      }
      
      //-->
    </script>
  </head>
  <body>
  <div id="ebenen">  
    <li><a href="#" onclick="einblenden('ebene2'); return 

false;">Nierenphysiologie</a></li>
    
      <p id="ebene2" style="display:none;">
        Glomerulus<br>Tubulus
      </p>
    
<li><a href="#" onclick="einblenden('ebene3'); return 

false;">nfi </a></li>
       <p id="ebene3" style="display:none;">
        Glomerul<br>Tubul
      </p>
</div>
    </body>

Bin überglücklich daß ich so schön implementieren darf. Dank Dir !!!!

Text einblenden/ausblenden

kokli

Neues Mitglied

Mars@Gera

Mitglied

Gilles

Blogger

kokli

Neues Mitglied

ogoogo

Neues Mitglied

Neueste Beiträge