Javascript 根据列表中的选择更改div的内容

我有一个链接列表，例如：

<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>

我有一个div部分（一篇文章），当从列表中进行选择时，我想动态更新它

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

从列表中选择一个状态

理想结果：从列表中选择阿拉巴马州将显示在阿拉巴马州县的主要分区a列表中

当前结果：从列表中选择阿拉巴马州不会更新主分区

我如何才能最好地完成这一点？JavaScript？JQuery？什么是桥

我正在寻找类似的东西：

但我没能在列表中使用它。

试试这个：

<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>

---

尝试添加事件侦听器以侦听无序列表元素上的单击

var states=document.getElementById（'states'）；
var main=document.getElementById（'main'）；
states.addEventListener（'click'，函数（e）{
e、 preventDefault（）；//不导航到





Main

有很多不同的方法可以做到这一点，取决于更深层次的内容将决定最佳方法

如果它是一个外部html页面，您可以这样做

html

---

你能发布你尝试过的代码吗？你尝试过你发布的示例吗？是的，我尝试了rybo111的答案，但很难将其转换为列表选择。特别是他的JQuery中关于选项：selected的第3行。我不熟悉JQuery。你是否有任何错误/正确地将JQuery合并到你的页面？这看起来可能有用。你能提供更多关于if（e.target.tagName=='A'）的输入吗？不能完全实现。不确定我缺少了什么。@levijoraan我在下面解释了代码段。“运行代码段”在你的浏览器中可用吗？是的，你的示例工作得很好。我用它来处理这个问题。谢谢。

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

<div id="div2"><div>

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