Ankündigung

Einklappen
Keine Ankündigung bisher.

DIV Inhalt aus einem Link laden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • DIV Inhalt aus einem Link laden

    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:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Nieder&ouml;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">
     &copy 2017 Niederösterreich 3D
    
     </div>
    
    </body>
    </html>
    left-menu:
    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>

  • #2
    So würde es funktionieren. Jedoch hätte ich dann für jeden Link ein eigenes Script. Kann man das besser machen?

    Code:
    <div class="css-treeview">
      <li><input type="checkbox" id="item-1" /*checked="checked"*/ /><label for="item-1"><strong>BADEN</strong></label>
       <ul>
          <li><a href="#" onClick="baden();">Baden bei Wien</a></li>
          <li><a href="#" onClick="berndorf();">Berndorf</a></li>
          <li><a href="#" onClick="ebreichsdorf();">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>
    
    
      </div>
    <script src="jquery.js" type="text/javascript"></script>
    <script>
     function baden() {
      $.get('baden.php', function(data) {
       $('#content').html(data); 
      })
     }
    </script>
    <script src="jquery.js" type="text/javascript"></script>
    <script>
     function berndorf() {
      $.get('berndorf.php', function(data) {
       $('#content').html(data); 
      })
     }
    </script>
    <script src="jquery.js" type="text/javascript"></script>
    <script>
     function ebreichsdorf() {
      $.get('ebreichsdorf.php', function(data) {
       $('#content').html(data); 
      })
     }
    </script>

    Kommentar


    • #3
      Zitat von winterteufel Beitrag anzeigen
      So würde es funktionieren. Jedoch hätte ich dann für jeden Link ein eigenes Script. Kann man das besser machen?
      Ja, google mal noch GET und POST...

      Kommentar

      Lädt...
      X