✔ div block ein bzw. ausblenden

Status
Nicht offen für weitere Antworten.
D

derheine

Grünschnabel
Halli hallo zusammen,

ich habe ein kleines Problem! Und zwar möchte ich via Javascript Inhalt ein- und ausblenden! Dazu habe ich auch schon eine Funktion gefunden. Aber jetzt habe ich das Problem, das ich mehrere Inhalte an der gleichen Stelle aber nicht zur gleichen Zeit einblenden möchte :)

Also z.B.:

Code: 
<div id="testlinkleiste">
<a href="javascript:void(0)" onclick="return test('text1')">text1</a> <a href="javascript:void(0)" onclick="return test('text2')">text2</a>
</div>

<div id="text1">
das hier ist ein text.. irgendwas bla bla bla und zwar die nummer <strong>1</strong>
</div>

<div id="text2">
das hier ist ein text.. irgendwas bla bla bla und zwar die nummer <strong>2</strong>
</div>

Das Ganze soll erstmal überhaupt nicht angezeigt werden.. also Style dafür wäre dann
Code: 
#text1 {
  display: none;
}

#text2 {
  display: none;
}

Jetzt möchte ich das so haben, das wenn man den Text1-Link anklickt, das Text2-Feld falls es sichtbar ist also display: block; ausgeblendet wird und dafür dann das Text1-Feld eingeblendet wird. Der einfach code der einfach das Feld sichtbar macht wäre folgender:
Code: 
function test(a) {
  var e = document.getElementById(a);
  if (!e) return true;
  if (e.style.display == "none") {
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
  return true;
}

Aber wie gesagt, der blendet halt nur die Felder ein, untereinander in der Reihenfolge in der man auf den Link klickt.

Habt ihr da irgendeine Idee? Ich verzweifel so langsam.. Javascript kann ich leider so gar nicht und mit meiner Logik (soweit vorhanden) komm ich auch nicht mehr weiter ;-)


Im Voraus vielen Dank

Liebe Grüße,
Jens
 
Probier's mal hiermit:

Code: 
var box = new Array();
box[0] = 'text1';
box[1] = 'text2';
// box[2] = 'text3';
// usw.

function show(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<box.length;i++)
                {
                        document.getElementById(box[i]).style.display="none";
                }

                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}
Code: 
<div id="testlinkleiste">
<a href="#" onclick="show('text1')">text1</a> <a href="#" onclick="show('text2')">text2</a>
</div>

<div id="text1" style="display:none;">
das hier ist ein text 1.. irgendwas bla bla bla und zwar die nummer <strong>1</strong>
</div>

<div id="text2" style="display:none;">
das hier ist ein text 2.. irgendwas bla bla bla und zwar die nummer <strong>2</strong>
</div>
 
Hallo,

also der Code an sich geht.
Nur ich habe das Problem, dass wenn ich meine seite aufrufe und ich dann den 1.Klick auf ein menüpunkt mache, nix passiert. Denn erst bei 2.mal klicken blendet der mir mein gewünschtes DIV ein....frag mich grad was ich falsch gemacht habe...

Also mein "Bild-Button", der das "onclick"-Ereignis hat sieht so aus:

HTML: 
<td valign="top" width="20%" height="100%">
<a href="#" onclick="show('menue1')">
<img src="Bilder/mbox1.gif" border="0"></a>
</td>

-----------------------------------------------------------------------

die function hab ich ja von dir, nur hab ich halt nochn paar Arrays hinzugefügt:

HTML: 
// Auswahl/Selektieren der Menüpunkte
var box = new Array();
box[0] = 'menue1';
box[1] = 'menue2';
box[2] = 'menue3';
box[3] = 'menue4';
box[4] = 'menue5';

// Fkt. zum Darstellen des Inhaltes des selektierten Menüpunktes
function show(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<box.length;i++)
                {
                        document.getElementById(box[i]).style.display="none";
                }

                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}

----------------------------------------------------------------------------------------------

So und das entsprechende DIV:

HTML: 
<div id="menue1">
<table border="1" width="120px" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" width="120px">
      News
    </td>
  </tr>

  <tr>
    <td align="center" width="120px">
      Saisontabelle
    </td>
  </tr>

  <tr>
    <td align="center" width="120px">
      Spielplan
    </td>
  </tr>

  <tr>
    <td align="center" width="120px">
      Events
    </td>
  </tr>
</table>
</div>

----------------------------------------------------------------

Wie Ihr seht soll das ne Seite für einen Fußballverein werden.
Ich habe das Problem halt mit allen DIVs(menue1,...,menue5)....
naja das is der betroffene Code, ich hoffe, dass ich mein Problem gut verständlich geschildert habe.

Mit besten Grüßen

darkentik

//EDIT

habe das Problem mit Hilfe des SELHTML.org Forums gelöst.

einfach die if-Abfrage :

HTML: 
if(document.getElementById(id).style.display=="none")

gegen diese tauschen :

HTML: 
if(document.getElementById(id).style.display!="block")

dann geht alles schon beim ersten mal klicken. :)

Also ich brauche nur folgende Zeilen in der Funktion damit es bei mir klappt:

HTML: 
// Auswahl/Selektieren der Menüpunkte
var box = new Array();
box[0] = 'menue1';
box[1] = 'menue2';
box[2] = 'menue3';
box[3] = 'menue4';
box[4] = 'menue5';

// Fkt. zum Darstellen des Inhaltes des selektierten Menüpunktes
function show(id)
{
   for(i=0;i<box.length;i++)
                {
                        document.getElementById(box[i]).style.display="none";
                }

                document.getElementById(id).style.display="block";
}

Na gut, bis bald!

darkentik
 
So ich bins nochmal...

meine Menüs funktionieren ja jetzt, was aber noch bugt:

Ich beusche meine Seite, klicke auf "Neuigkeiten" da wird das DIV für "Neuigkeiten" eingeblendet, dann klicke ich auf einen Menüpunkt im DIV z.b. "News" so dann werde ich selbstverständlich auf die Zieladresse verwiesen nämlich die News.php, JETZT verschwindet das DIV wieder....und genau das soll nicht passieren.

Hat da jmd ne Ahnung oder vielleicht selber schonmal erlebt?
tschü...
 
Hi,

dieser "Vorgang" ist eigentlich normal, wenn "News.php" aufgerufen, und somit in dieser Seite das Menü neu geladen wird.

Also mußt du dafür Sorge tragen, dass in der aktuell geöffneten Seite der dazugehörige Menüpunkt "aktiv/geöffnet" ist.

Übrigens wird in den HTML-Attributen, wie z.B. width, keine Einheit (px) angegeben.

mfg Maik
 
Wie stell ich das am einfachsten an, dass die aktiv geöffnet bleiben?
d.h. ich muss in die entsprechenden php Seiten dann auch die DIV´s reinschreiben oder versteh ich das jetz falsch?
gut dann änder ich mal die werte ohne einheit
 
Hab da grad nochmal was probiert aber krieg das nicht hin.kann mir da vllt jmd nochmal nen genaueren Tipp geben?
weiß nicht inwieweit ich das eigentlich WIE in die PHP Dateien schreiben muss und WO...tut mir leid hab mit PHP noch nicht lange am Hut.
Wär für jede Hilfe dankbar!
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück