Liebe Forumsmitglieder,
ich möchte folgendes realisieren: Auf der Webseite soll es ein Auflistung mit Bezirken und den dazugehörigen Städten geben. Diese Auflistung, die immer wieder ergänzt wird, ist als Baumstruktur umgesetzt damit Anfangs nur die Bezirke und nach einem Klick die jeweiligen Orte zu sehen sind. Diese Auflistung soll bei einem Klick auf einen Ort so stehen bleiben, also die Aufgeklappten sollen aufgeklappt und die Zugeklappten zugeklappt bleiben. Der Inhalt des Links soll in einem DIV angezeigt werden.
Ein Beispiel: Bezirke sind BADEN, BRUCK AN DER LEITHA, GÄNSERNDORF,... Wenn ich auf BADEN klicke, werden die dazugehörigen Orte angezeigt. Wenn ich jetzt zb. auf Berndorf klicke, soll die angezeigte Struktur nicht verändert werden, sich also nicht nach dem neuen Laden wieder zusammenklappen und im DIV "Content" soll zb. Berndorf.php angezeigt werden.
Hier das Beispiel:
http://www.noe-3d.at//NOE/index.php
Habe einige Stunden gegoogelt und bin auf AJAX gestossen. Leider habe ich kein Beispiel gefunden, dass ich umbasteln kann, da ich mit AJAX oder JS nicht vertraut bin.
Würde mich sehr freuen, wenn ich hier ein Beispiel für meine Umsetzung erhalte.
Vielen lieben Dank
Harald
index:
left-menu:
ich möchte folgendes realisieren: Auf der Webseite soll es ein Auflistung mit Bezirken und den dazugehörigen Städten geben. Diese Auflistung, die immer wieder ergänzt wird, ist als Baumstruktur umgesetzt damit Anfangs nur die Bezirke und nach einem Klick die jeweiligen Orte zu sehen sind. Diese Auflistung soll bei einem Klick auf einen Ort so stehen bleiben, also die Aufgeklappten sollen aufgeklappt und die Zugeklappten zugeklappt bleiben. Der Inhalt des Links soll in einem DIV angezeigt werden.
Ein Beispiel: Bezirke sind BADEN, BRUCK AN DER LEITHA, GÄNSERNDORF,... Wenn ich auf BADEN klicke, werden die dazugehörigen Orte angezeigt. Wenn ich jetzt zb. auf Berndorf klicke, soll die angezeigte Struktur nicht verändert werden, sich also nicht nach dem neuen Laden wieder zusammenklappen und im DIV "Content" soll zb. Berndorf.php angezeigt werden.
Hier das Beispiel:
http://www.noe-3d.at//NOE/index.php
Habe einige Stunden gegoogelt und bin auf AJAX gestossen. Leider habe ich kein Beispiel gefunden, dass ich umbasteln kann, da ich mit AJAX oder JS nicht vertraut bin.
Würde mich sehr freuen, wenn ich hier ein Beispiel für meine Umsetzung erhalte.
Vielen lieben Dank
Harald
index:
Code:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Niederösterreich 3D</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="leftmenu.css"> </head> <body> <div id="wrapper" class="shadow"> <div id="header"> </div> <div id="menu-top"> <?php include("menu-top.php"); ?> </div> <div id="menu-left"> <?php include("menu-left.php"); ?> </div> <div id="content"> </div> </div> <div id="footer"> © 2017 Niederösterreich 3D </div> </body> </html>
Code:
<div class="css-treeview"> <ul> <li><input type="checkbox" id="item-1" /*checked="checked"*/ /><label for="item-1"><strong>BADEN</strong></label> <ul> <li><a href="baden.php">Baden bei Wien</a></li> <li><a href="#">Berndorf</a></li> <li><a href="#">Ebreichsdorf</a></li> <li><a href="#">Heiligenkreuz (Stift)</a></li> <li><a href="#">Oberwaltersdorf</a></li> <li><a href="#">Pottendorf</a></li> <li><a href="#">Traiskirchen</a></li> <li><a href="#">Trumau</a></li><br /> </ul> <ul> <li><input type="checkbox" id="item-2" /*checked="checked"*/ /><label for="item-2"><strong>BRUCK AN DER LEITHA</strong></label> <ul> <li><a href="#">Bad Deutsch Altenburg</a></li> <li><a href="#">Berg</a></li> <li><a href="#">Bruck an der Leitha</a></li> <li><a href="#">Göttlesbrunn-Arbesthal</a></li> <li><a href="#">Hainburg an der Donau</a></li> <li><a href="#">Mannersdorf/Leithagebirge</a></li> <li><a href="#">Petronell-Carnuntum</a></li> <li><a href="#">Rohrau</a></li> <li><a href="#">Schwechat</a></li> <li><a href="#">Sommerein</a></li> <li><a href="#">Wolfsthal</a></li><br /> </ul> <ul> <li><input type="checkbox" id="item-3" /*checked="checked"*/ /><label for="item-3"><strong>GÄNSERNDORF</strong></label> <ul> <li><a href="#">Deutsch-Wagram</a></li> <li><a href="#">Engelhartstetten</a></li> <li><a href="#">Marchegg</a></li> <li><a href="#">Markgrafneusiedl</a></li><br /> </ul> <ul> <li><input type="checkbox" id="item-4" /*checked="checked"*/ /><label for="item-4"><strong>HOLLABRUNN</strong></label> <ul> <li><a href="#">Göllersdorf</a></li> </ul> </div>
Kommentar