JavaScript / Ordner Navigation[IE|M|O]

von: Werner Zenk

Eine übersichtliche Navigation in einem Verzeichnisbaum.

Verzeichnis 1
Verzeichnis 2
Verzeichnis 3
Quelltext: 
       

<style type="text/css">
img.Bild{
 border: 0px;
 margin-right: 3px;
}

a.Ordner{
 font-family: Verdana;
 font-size: 11px;
 text-decoration: None;
 color: #000000;
}

.link{
 font-family: Verdana;
 font-size: 11px;
 text-decoration: None;
 color: #FF0000;
}

.link:hover{
 text-decoration: Underline;
}

.Rand{
 margin-left: 23px;
}
</style>

<script type='text/javascript'>
 function anzeigen(das,was){
 if (document.getElementById(das).style.display == 'none') {
  document.getElementById(das).style.display = 'block'; 
  was.src="open.gif";
 }
 else {
  document.getElementById(das).style.display = 'none';
   was.src='closed.gif';
  }
}
 </script>

<a href="javascript:anzeigen('ordner_1','bild_1');" class="Ordner">
 <img name="bild_1" src="closed.gif" class="Bild"> Verzeichnis 1
</a><br>
<div id="ordner_1" class="Rand" style="display: none;">
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>
</div>

<a href="javascript:anzeigen('ordner_2','bild_2');" class="Ordner">
 <img name="bild_2" src="closed.gif" class="Bild"> Verzeichnis 2 
</a><br>
<div id="ordner_2" class="Rand" style="display: none;">
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>
</div>
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?  
Kommentare: 4 » aufmachen   
Karina:
Dieses Script ist super! Funzt klasse...

Andreas:
wie kann ich noch mehr Verzeichnisse einfügen?

Werner:
Die ID "ordner 2" muss für einen weiteres Verzeichnis in "ordner 3" eingefügt werden. Der zu ändernde Code ist im Quelltext farbig markiert! Funktioniert wirklich gut! Kann man auch mehrere Ordner ineinander legen (also Ordner 2a, 2b etc.)? Gruß, Daniel

Werner:
Ja, es ist nur darauf zu achten das die <div>-Tags richtig ineinander verschachtelt werden. 
<a href="javascript: anzeigen('ordner_2', bild_2);" class="Ordner">
 <img name="bild_2" src="closed.gif" class="Bild"> Verzeichnis 2 
</a><br>
<div id="ordner_2" class="Rand" style="display: none;">
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>
 <a href="#" class="link">Demolink</a><br>

<a href="javascript: anzeigen('ordner_2a', bild_2a);" class="Ordner">
 <img name="bild_2a" src="closed.gif" class="Bild"> Verzeichnis 2a 
</a><br>
  <div id="ordner_2a" class="Rand" style="display: none;">
   <a href="#" class="link">Demolink</a><br>
   <a href="#" class="link">Demolink</a><br>
   <a href="#" class="link">Demolink</a><br>
   <a href="#" class="link">Demolink</a><br>
   <a href="#" class="link">Demolink</a><br>
  </div>
</div>


Degel:
Sollte das "Ordner-gif" eigentlich einen geöffneten Order zeigen, wenn man draufklickt? Bei mir bleibt es geschlossen. Woran kann das liegen?

Marko:
Ich habe mal dein Skript für die Folder Navigation modifiziert. Bei dieser Navigation werden alle anderen Tab (außer das aktuelle) geschlossen. Die Bilder werden nun auch entsprechend angezeigt. 
<html><head>
<title></title>
<style type="text/css">
img.Bild {
 border: 0px; margin-right: 3px;
}
a.Ordner {
 font-family: Verdana;
 font-size: 11px;
 text-decoration: None;
 color: #000000;
}
.link {
 font-family: Verdana;
 font-size: 11px
; text-decoration: None;
 color: #FF0000;
}
.link:hover {
 text-decoration: Underline;
}
.Rand {
 margin-left: 23px;
}
</style>
<script type='text/javascript'>
function toggleNavTab( divId, imgId ) {
// get the last number of the id
var group = divId.replace(/d+$/g, "");
// get all emlements which begin with the name 'group'
var oElements = getElementByIdName (document, 'div', group);
// close all elements, but not the current
for (props in oElements) {
 if (oElements[props].id !== divId)display(oElements[props].id,'none','closed.gif');
}
// toggle the current element (display,hide)
if (document.getElementById(divId).style.display == 'none') {
 display(divId,'block','open.gif');
}
else {display(divId,'none','closed.gif');
}
}
function display(oId, distType, imgSrc) {// get the image name of the div object name
var imgId = oId.replace(/navFolder/g, 'navImage');
// hide/display the div object
if (document.getElementById([oId]))document.getElementById([oId]).style.display = distType;// display closed or open image
if (eval('document.images.'+imgId))eval( 'document.images.'+imgId+'.src="'+imgSrc+'"' );
}
function getElementByIdName(oElm, strTagName, strIdName) {
 strIdName = strIdName.replace(/-/g, "\-");
 var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
 var arrReturnElements = new Array();
 var oRegExp = new RegExp("^" + strIdName + "\d+$");
 var oElement;
 for(var i=0; i<arrElements.length; i++) {
  oElement = arrElements[i];
  if (oRegExp.test(oElement.id)) {
   arrReturnElements.push(oElement);
 }
 }
 return (arrReturnElements);
}
</script>
</head><body>
<a href="javascript:toggleNavTab('navFolder1','navImage1');" class="Ordner"><img name="navImage1" src="closed.gif" class="Bild">Folder 1</a><br>
<div id="navFolder1" class="Rand" style="display: none;">
<a href="#" class="link">Demolink</a><br>
<a href="#" class="link">Demolink</a><br><a href="#" class="link">Demolink</a><br>
</div>

<a href="javascript:toggleNavTab('navFolder2','navImage2');" class="Ordner"><img name="navImage2" src="closed.gif" class="Bild">Folder 2</a><br>
<div id="navFolder2" class="Rand" style="display: none;">
<a href="#" class="link">Demolink</a><br><a href="#" class="link">Demolink</a><br>
<a href="#" class="link">Demolink</a><br><a href="#" class="link">Demolink</a><br>
<a href="#" class="link">Demolink</a><br></div>
<a href="javascript:toggleNavTab('navFolder3','navImage3');" class="Ordner"><img name="navImage3" src="closed.gif" class="Bild">Folder 3</a><br>

<div id="navFolder3" class="Rand" style="display: none;"><a href="#" class="link">Demolink</a><br><a href="#" class="link">Demolink</a><br>
<a href="#" class="link">Demolink</a><br>
<a href="#" class="link">Demolink</a><br>
<a href="#" class="link">Demolink</a><br>
</div>

</body>
</html>
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Info - Mit Links kann man auch Javascript ausführen.  Formularfelder dynamisch hinzufügen  Counter - Hier finden Sie einen Counter der die Stunden, Minuten und Sekunden von einer vorher festgelegten Zeit abzählt.  Schriftgröße der Webseite mit JavaScript ändern  Statuszeilentext - Einmal etwas anderes als der nervige Statuszeilenticker :-)  Bild im Fenster öffnen - Mit diesem Script zeigen Sie Bilder in einem eigenen Fenster an.  JS-Index - Objekte  Ein Button wird zum Link (Linkbutton).  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner