JavaScript Tabbed Navigation

digiTALE · 14. Februar 2011

Hallo,

ich möchte ein einfaches und eigenes "tabbed using" erstellen. Es fängt ja schon gut an. Oben ist die Navigation aus 4 oder mehr Tabs. Das momentane Script hebt den Link hervor, den der Benutzer drückt. Aber wenn der Benutzer alle Tabs durch klickt sind alle hervorgehoben und das ist Mist.

Wie kann ich dem Script mitteilen, das er, ausser dem aktiven Tab, alle anderen wieder in den normalen Zustand zurückkehren lässt?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tab</title>
<style type="text/css">
* { padding: 0; margin: 0; border: 0; list-style-type: none; font-family: "PT Sans", Verdana, Arial, Helvetica, sans-serif; text-decoration: none; }
body { margin: 32px; }
h4 { font-size: 1em; padding: 4px 0; }
h4 small { font-weight: normal; color: #666; }
div#menu ul { height: 54px; border-left: 1px solid #BBB; margin-bottom: 25px; }
div#menu ul li a { color: #666; float: left; padding: 10px; width: 170px; display: block; border-right: 1px solid #BBB; }
div#menu ul li a img { float: left; padding-right: 10px; }
div#menu ul li a:hover { color: #111; background: #F4F4F4; }
div#menu ul li.active a { color: #111; background: #EEE; }
div#menu ul li.active a small { color: #666; }
</style>
<script type="text/javascript">

function req(id, xOpen)
{
	if (xOpen) {
		document.getElementById("nav-" + id).className = "active";
	} else {
		document.getElementById("nav-" + id).className = "";
	}
}
</script>
</head>

<body>


<div id="menu">
	<ul>
		<li id="nav-mirana" class="active"><a href="javascript:;" onclick="req('mirana', true); return false;"><strong>Mirana</strong><br /><small>Untertitel</small></a></li>
		<li id="nav-emporas"><a href="javascript:;" onclick="req('emporas', true); return false;"><strong>Emporas</strong><br /><small>Untertitel</small></a></li>
		<li id="nav-quadros"><a href="javascript:;" onclick="req('quadros', true); return false;"><strong>Quadros</strong><br /><small>Untertitel</small></a></li>
		<li id="nav-rhuno"><a href="javascript:;" onclick="req('rhuno', true); return false;"><strong>Rhuno</strong><br /><small>Untertitel</small></a></li>
	</ul>
</div>

<div id="box">
	<div id="mirana"><p>Mirana Text</p></div>
	<div id="emporas"><p>Emporas Text</p></div>
	<div id="quadros"><p>Quadros Text</p></div>
	<div id="rhuno"><p>Rhuno Text</p></div>
</div>


</body>
</html>

Imp4ct · 14. Februar 2011

Warum willst du dafür JavaScript benutzen?

-> CSS

/// edit:

Sry hab grad erst gesehen dass du anscheinend etwas anderes vorhast als ich als erstes gemeint hätte.

Btw: Versuch dich vllt. mal mit jQuery, erleichtert dir deine Arbeit ungemein.

Complication · 14. Februar 2011

Versuchs doch mal mit onfocus anstatt onclick

Code:

<li id="nav-mirana" class="active"><a href="javascript:;" [COLOR="Red"]onfocus[/COLOR]="req('mirana', true); return false;"><strong>Mirana</strong><br /><small>Untertitel</small></a></li>

Um den Ursprungszustand wieder herzustellen verwendest du onblur

Beispiel:
http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#legend

digiTALE · 14. Februar 2011

@Imp4ct

Ich könnte jQuerry benutzen, aber für ein einfaches tabbed using will ich ne unbedingt ein 60kb Skript im Hintergrund laden bei dem ich gerademal 5% bräuchte. Ich will nur das im Quelltext haben, was ich auch wirklich benutze.

Florian_s1980 · 14. Februar 2011

Hi,

kann ich leider nicht sagen aber ich nehme für sowas jQuery. Finde es geht wesentlich schneller als wenn ich es selber erstelle.

Imp4ct · 14. Februar 2011

digiTALE schrieb:
@Imp4ct

Ich könnte jQuerry benutzen, aber für ein einfaches tabbed using will ich ne unbedingt ein 60kb Skript im Hintergrund laden bei dem ich gerademal 5% bräuchte. Ich will nur das im Quelltext haben, was ich auch wirklich benutze.

Ja nur da es ja wohl nicht nur bei 4, 2-Wort-Absätzen bleiben wird, wird das Dokument ja wohl sowieso noch größer. Und umso mehr JavaScript du selbst schreibst umso eher kannst du gleich jQuery verwenden. (Eigen geschriebenes JS ist leider doch meist sehr ineffizient)

Ergänzung (14. Februar 2011)

So hier der Code in reinem JavaScript:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tab</title>
<style type="text/css">
* { padding: 0; margin: 0; border: 0; list-style-type: none; font-family: "PT Sans", Verdana, Arial, Helvetica, sans-serif; text-decoration: none; }
body { margin: 32px; }
h4 { font-size: 1em; padding: 4px 0; }
h4 small { font-weight: normal; color: #666; }
div#menu ul { height: 54px; border-left: 1px solid #BBB; margin-bottom: 25px; }
div#menu ul li a { color: #666; float: left; padding: 10px; width: 170px; display: block; border-right: 1px solid #BBB; }
div#menu ul li a img { float: left; padding-right: 10px; }
div#menu ul li a:hover { color: #111; background: #F4F4F4; }
div#menu ul li.active a { color: #111; background: #EEE; }
div#menu ul li.active a small { color: #666; }
</style>
<script type="text/javascript">

function req(id, xOpen)
{
	elements=document.getElementsByClassName("active");
	for (i=0;i<=elements.length;i++){
		elements[i].className="";
	}
	
	if (xOpen) {
		document.getElementById("nav-" + id).className = "active";
	} else {
		document.getElementById("nav-" + id).className = "";
	}
}
</script>
</head>

<body>


<div id="menu">
	<ul>
		<li id="nav-mirana" class="active"><a href="javascript:;" onclick="req('mirana', true); return false;"><strong>Mirana</strong><br /><small>Untertitel</small></a></li>
		<li id="nav-emporas"><a href="javascript:;" onclick="req('emporas', true); return false;"><strong>Emporas</strong><br /><small>Untertitel</small></a></li>
		<li id="nav-quadros"><a href="javascript:;" onclick="req('quadros', true); return false;"><strong>Quadros</strong><br /><small>Untertitel</small></a></li>
		<li id="nav-rhuno"><a href="javascript:;" onclick="req('rhuno', true); return false;"><strong>Rhuno</strong><br /><small>Untertitel</small></a></li>
	</ul>
</div>

<div id="box">
	<div id="mirana"><p>Mirana Text</p></div>
	<div id="emporas"><p>Emporas Text</p></div>
	<div id="quadros"><p>Quadros Text</p></div>
	<div id="rhuno"><p>Rhuno Text</p></div>
</div>


</body>
</html>

Suche

JavaScript Tabbed Navigation

digiTALE

Lt. Junior Grade

Imp4ct

Cadet 2nd Year

Complication

Banned

digiTALE

Lt. Junior Grade

Florian_s1980

Cadet 3rd Year

Imp4ct

Cadet 2nd Year

Ähnliche Themen