JavaScript <div> mit JS sichtbar machen

[TheGTI]

Hallo,

ich finde bei meinem Code auf Teufel komm raus den Fehler nicht. Ich möchte auf der linken Seite eine Navigationsleiste erstellen, die sich durch klicken und dank JS verändert. (Unter den einzelnen Boxen der Klasse item sollen kleinere Boxen der Klasse subItem erscheinen)

Das html-Grundgerüst sieht so aus:

<div id="menu" >
			<div onclick="show(null);" class="item">
				Teamseite
			</div>
			<div onclick="show('navChris');" class="item">
				Chris
			</div>
			<div id="navChris" style="display: none">
				<div onclick="showDetails(info1)" class="subitem">
					Informationen
				</div>
				<div onclick="showDetails(pic1)" class="subItem">
					Bild
				</div>
			</div>
		</div>

Der passende JS-Schnipsel:

var allNavs = new Array("navChris", "navSergej", "navPatrick");

function show(navId) {
	if (navId != null) {
		hideDetails();
		showNavBar(navId);
	}
}

function hideDetails() {
	for (var i = 0; i < allDetails.length; i++) {
		document.getElementById(allDetails[i]).style.display = "none";
	}
}

function showNavBar(navId) {
	for (var i = 0; i < allNavs.length; i++) {
		document.getElementById(allNavs[i]).style.display = (navId == allNavs[i]) ? "block" : "none";
	}
}

Ist der CSS-Teil auch wichtig? Ich hänge ihn mal mit an:

div#menu {
	background-color: #17b257;
	border: purple 2px solid;
	width: 160px;
	margin: 40px 40px;
	float: left;
	padding: 0px;
}

div.item:hover {
	color: white;
}

div.item:active {
	border: #939294 3px outset;
}

div.item {
	text-align: center;
	padding: 3px;
	margin: 5px 5px;
	border: black 2px solid;
	background-color: #EDECEE;
	cursor: pointer;
}

div.subItem {
	text-align: center;
	padding: 3px;
	margin: 5px 10px;
	border: black 1px solid;
	background-color: #EDECEE;
	cursor: pointer;
}

 

[3murmeln]

Woher kommt >>allDetails<<?

 

[TheGTI]

Es sind oben noch zwei weitere Arrays initialisiert, die habe ich hier im Code weggelassen.

 

[3murmeln]

Also bei mir funktioniert das Beispiel grundsätzlich. Wenn du denn bei "Teamseite" show('') statt show(null) einträgst, klappen die Details auch schön wieder ein.

 

[IMakeULoveMe]

Ist dir bewusst, dass du mit deinen Browser selbst debuggen kannst? (Chrome / Firebug / F12)
Weder gibt es allDetails noch stimmen die Werte aus allNavs mit deinen HTML überein.

 

[TheGTI]

Jetzt habe ich den Fehler gefunden: Es lag an hideDetails(), hier war der Fehler versteckt. Der Rest hat tatsächlich funktioniert. Manchmal sieht man den Wald vor lauter Bäumen nicht.

@IMakeULoveMe: Ich habe oben nur die entscheidenden Passagen Code eingeführt, die restlichen Navs (und Details) gibt es natürlich.

Das mit dem Browserdebugging ist interessant, kannte ich noch gar nicht. Ist das hier die richtige Seite (Chrome) dazu:

https://developers.google.com/chrome-developer-tools/docs/protocol/1.0/debugger

?

 

[IMakeULoveMe]

Wenn du Chrome verwendest, gehe zum jeweiligen Tab mit der Testseite und drücke F12.
Damit kannst du zum Beispiel Breakpoints setzen, Variablen einsehen und ändern.

https://www.youtube.com/results?search_query=chrome+debugging

Bei Firefox solltest du Firebug installieren, die neueren IE haben ebenfalls solche Funktionen.

 

[Daaron]

Regel 1 bei der Software-Entwicklung: Wenn es nicht (z.B. aufgrund von Lizenzen) unvermeidlich ist, erfinde das Rad nicht neu!

Alle größeren JS-Bibliotheken bieten die eine oder andere Form von Show/Hide-Routine

 

[TheGTI]

Da gebe ich dir absolut recht. Aber ich möchte das ganze erst einmal verstehen, bevor ich "blind" Funktionen der Bibliothek verwende.