basierend auf Auswahl aus einer Liste

Question

Ich habe eine Liste von Links wie:

<li><a href="#">Alabama</a></li> 
<li><a href="#">Alaska</a></li> 
<li><a href="#">Arizona</a></li> 
<li><a href="#">Arkansas</a></li> 
<li><a href="#">California</a></li> 

Ich habe ein div Abschnitt (Artikel), die ich will dynamisch aktualisieren, da eine Auswahl ist aus der Liste gemacht.

<div>Select a state from the list</div> 

Gewünschtes Ergebnis: Auswahl Alabama aus der Liste wird in der Haupt div eine Liste von Grafschaften in Alabama.

Aktuelles Ergebnis: Wenn Sie Alabama aus der Liste auswählen, wird das Hauptdiv. Nicht aktualisiert.

Wie kann ich das am besten erreichen? JavaScript? JQuery? JSFidel?

Ich suche nach etwas, vielleicht ähnlich wie diese: Change the content of a div based on selection from dropdown menu

Aber ich hatte kein Glück, dass immer mit einer Liste zu arbeiten.

Answer 1

Versuchen Hinzufügen eines Ereignis-Listener, die Klicks auf die ungeordnete Liste Element zu hören.

var states = document.getElementById('states'); 
 
var main = document.getElementById('main'); 
 

 
states.addEventListener('click', function(e) { 
 
    e.preventDefault(); // don't navigate to <a> tag href 
 
    if (e.target.tagName === 'A') { 
 
    main.textContent = e.target.textContent; 
 
    } 
 
});

<ul id="states"> 
 
    <li><a href="#">Alabama</a></li> 
 
    <li><a href="#">Alaska</a></li> 
 
    <li><a href="#">Arizona</a></li> 
 
    <li><a href="#">Arkansas</a></li> 
 
    <li><a href="#">California</a></li> 
 
</ul> 
 

 

 
<div id="main">Main</div>

Beachten Sie, dass wir eine einzige click event listener an die Mutter aller Listenelemente hinzufügen und dann überprüfen wir durch den Vergleich der tagName sicher den Klick war auf einem A Tag zu machen. Dann können wir das textContent von dem angeklickten Element zu dem Hauptelement kopieren.

Answer 2

Versuchen Sie folgendes:

<ul id="list"> 
<li><a href="#">Alabama</a></li> 
<li><a href="#">Alaska</a></li> 
<li><a href="#">Arizona</a></li> 
<li><a href="#">Arkansas</a></li> 
<li><a href="#">California</a></li> 
</ul> 
<div id="selection"></div> 

jQuery:

$(document).ready(function() { 
    $('#list a').on('click', function(e) { 
     e.preventDefault(); 
     $('#selection').text($(this).text()); 
    }); 
}); 

Answer 3

Es gibt so viele verschiedene Möglichkeiten, dies zu tun und abhängig davon, was die tieferen Ebeneninhalte sind, wird die beste Methode bestimmen.

Wenn es eine externe HTML-Seite ist, dass Sie könnte so etwas wie

html

<div id="div2"><div> 

jquery

$('#div1').select(), 
$('#div2').load("statesName.html");