Mehrere div's mit gleichen ID anzeigen / ausblenden

phpbeginner · 05.09.2007, 22:10

Hallo,

vielleicht kann mir jemand einen Tipp geben, wie ich folgendes realisieren kann.

Ich habe auf einer HTML-Seite viele DIV Elemente.

Code:

<div id="menu" style="display:none;">Inhalt2</div>
<div id="menu" style="display:none;">Inhalt2</div>
<div id="menu" style="display:none;">Inhalt3</div>

Alle diese DIV Container möchte mit einem Klick anzeigen lassen auf einen Link anzeigen lassen. Dafür habe ich diese Funktion:

Code:

function soundso(id)
{
    if(document.getElementById(id).style.display=="none") {
        document.getElementById(id).style.display = "";
    }else {
	document.getElementById(id).style.display="none";
    }
    return true;
}

Bei oben genannter Funktion lässt sich nur der erster DIV Container anzeigen, alle anderen aber nicht.

Wie kann ich Funktion so umbauen, dass es alle DIV Conteiner angezeigt werden?

Slava · 05.09.2007, 22:46

Halloo!!!
sagt dir ID was?
ID bedeutet einmalig und kann in einem Document nur ein mal vorkommen.
also
1) alle ids die 2 mal vorkommen entfernen
2) statt ids machst du attribut name mit dem wert menu
name="menu"
3) du änderst deine function so

Code:

function soundso(name) 
{ 
    divs=document.getElementsByName(name);
  for(i=0;i<divs.length;i++){
     divs[i].style.display=(divs[i].style.display=="none") ?"block":"none"; 
  }
}

Zergling-new · 05.09.2007, 22:47

Garnicht, weil du das eindeutige ID-Attribut mehrfach belegst.

Code:

<div class="element-closed" id="content-1">inhalt 1</div>
<div class="element-closed" id="content-2">inhalt 2</div>
<div class="element-closed" id="content-3">inhalt 3</div>

Code:

div.element-closed {
  display : none;
}
div.element-open {
  display : block;
}

Code:

var divList = document.getElementsByTagName("DIV");
for (var div, i = 0, ix = divList.length; i < ix; ++i) {
  div = divList[i];
  if (div.className.match(/\belement-closed\b/)) {
    div.className = div.className.replace(/\belement-closed\b/, "element-open");
  }
}

Einzeln gehts natürlich auch:

Code:

with (document) {
  getElementById("inhalt-1").style.display = "none";
  getElementById("inhalt-2").style.display = "none";
  getElementById("inhalt-3").style.display = "none";
}

Von mir aus auch als Schleife.

Slava · 05.09.2007, 23:00

@Zergling
meine meinung nach ist es besser mit attribut name=X die DIVs gekennzeichnen und dann in einer schleife erledigen.

Zergling-new · 05.09.2007, 23:06

name war mir eigentlich nur für Formular-Elemente ein Begriff, wenn das aber ein gültiges Attribut ist, klar, ist bestimmt schneller.

phpbeginner · 05.09.2007, 23:06

danke
das Problem ist, ich weiss nicht wieviele DIVs gibt
Es können auf einer Seite 5 auf anderen 20 sein

kann man elemente bzw. IDs irgendwie durchzählen?
möchte keine Schleife 50x durchlaufen wenn es nur 5 DIVs sind

Zergling-new · 05.09.2007, 23:12

Sehen wir den gleichen Thread? Augen auf!

Slava · 05.09.2007, 23:14

Zitat:

Zitat von phpbeginner

danke
das Problem ist, ich weiss nicht wieviele DIVs gibt
Es können auf einer Seite 5 auf anderen 20 sein

dafür habe ich dir doch angeboten bei divs die attribut name mit dem wert 'menu' einzufügen. attribut 'name' darf mehrere mals vorkommen.

Slava · 06.09.2007, 00:29

Hm!
meine code funktioniert aber nur in Firefox

IE macht nicht mit. Also hat Zergling doch Recht, dass 'name' nur bei formularelementen verwendet wird.

nikosch · 06.09.2007, 02:48

Als Universalattribut bietet sich eigentlich nur class an. Die Gültigkeit von Attributen für bestimmte Tags kann man in der Selfhtml-Attributrefenz nachlesen.
Den Zugriff auf class-markierte Elemente über eine selbstgeschriebene getElementsByClass () Funktion habe ich in einem Tutorial ausführlich beschrieben: http://www.phpfriend.de/forum/ftopic62110.html.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
Formular mit DIVs	Aris Sung	HTML, Usability und Barrierefreiheit	2	25.11.2007 14:09
Ober - Unterkategorie anzeigen / ausblenden	prinzli	PHP Tipps 2008	6	24.11.2007 16:57
Dynamisches Container-Div für floating Divs	HStev	HTML, Usability und Barrierefreiheit	1	14.09.2007 12:39
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
Baumstruktur anzeigen		PHP-Fortgeschrittene	13	31.03.2006 21:37
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
DIVs auf "echte" 100% der Seite setzen?	King2k	HTML, Usability und Barrierefreiheit	3	07.12.2005 15:15
Layer ein- und ausblenden	GN	HTML, Usability und Barrierefreiheit	2	24.08.2005 23:28
Abstände 2er Divs voneinander.	'progman'	HTML, Usability und Barrierefreiheit	8	29.07.2005 11:42
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27
[Erledigt] Cookie - Seite anzeigen / nicht anzeigen		PHP Tipps 2004-2	2	11.11.2004 15:59
Alle Datenbanken und Tabellen anzeigen anzeigen	imported_Lumio	PHP Tipps 2004	4	13.09.2004 14:26
Xampp, eigene Dateien anzeigen...		Server, Hosting und Workstations	4	19.06.2004 23:36

05.09.2007, 22:10
phpbeginner Erfahrener Benutzer Registriert seit: 15.06.2005 Beiträge: 206	Mehrere div's mit gleichen ID anzeigen / ausblenden Hallo, vielleicht kann mir jemand einen Tipp geben, wie ich folgendes realisieren kann. Ich habe auf einer HTML-Seite viele DIV Elemente. Code: <div id="menu" style="display:none;">Inhalt2</div> <div id="menu" style="display:none;">Inhalt2</div> <div id="menu" style="display:none;">Inhalt3</div> Alle diese DIV Container möchte mit einem Klick anzeigen lassen auf einen Link anzeigen lassen. Dafür habe ich diese Funktion: Code: function soundso(id) { if(document.getElementById(id).style.display=="none") { document.getElementById(id).style.display = ""; }else { document.getElementById(id).style.display="none"; } return true; } Bei oben genannter Funktion lässt sich nur der erster DIV Container anzeigen, alle anderen aber nicht. Wie kann ich Funktion so umbauen, dass es alle DIV Conteiner angezeigt werden? __________________ Ich lerne PHP und es macht mir Spass!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

05.09.2007, 22:46
Slava Erfahrener Benutzer Registriert seit: 17.01.2006 Beiträge: 468	Halloo!!! sagt dir ID was? ID bedeutet einmalig und kann in einem Document nur ein mal vorkommen. also 1) alle ids die 2 mal vorkommen entfernen 2) statt ids machst du attribut name mit dem wert menu name="menu" 3) du änderst deine function so Code: function soundso(name) { divs=document.getElementsByName(name); for(i=0;i<divs.length;i++){ divs[i].style.display=(divs[i].style.display=="none") ?"block":"none"; } } __________________ Slava http://bituniverse.com

05.09.2007, 23:00
Slava Erfahrener Benutzer Registriert seit: 17.01.2006 Beiträge: 468	@Zergling meine meinung nach ist es besser mit attribut name=X die DIVs gekennzeichnen und dann in einer schleife erledigen. __________________ Slava http://bituniverse.com

05.09.2007, 23:06
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	name war mir eigentlich nur für Formular-Elemente ein Begriff, wenn das aber ein gültiges Attribut ist, klar, ist bestimmt schneller.

05.09.2007, 23:12
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Sehen wir den gleichen Thread? Augen auf!

06.09.2007, 00:29
Slava Erfahrener Benutzer Registriert seit: 17.01.2006 Beiträge: 468	Hm! meine code funktioniert aber nur in Firefox IE macht nicht mit. Also hat Zergling doch Recht, dass 'name' nur bei formularelementen verwendet wird. __________________ Slava http://bituniverse.com

06.09.2007, 02:48
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.256 PHP-Kenntnisse: Fortgeschritten	Als Universalattribut bietet sich eigentlich nur class an. Die Gültigkeit von Attributen für bestimmte Tags kann man in der Selfhtml-Attributrefenz nachlesen. Den Zugriff auf class-markierte Elemente über eine selbstgeschriebene getElementsByClass () Funktion habe ich in einem Tutorial ausführlich beschrieben: http://www.phpfriend.de/forum/ftopic62110.html.