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

Question

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

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

期望的结果:从列表中选择阿拉巴马州会在主 div 中显示阿拉巴马州的县列表。

当前结果:从列表中选择 Alabama 不会更新主 div。

我怎样才能最好地做到这一点？ JavaScript？查询？ JSFiddle？

我正在寻找可能与此类似的东西:Change the content of a div based on selection from dropdown menu

但我没有运气让它与列表一起工作。

Answer 1

尝试添加一个事件监听器来监听对无序列表元素的点击。

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>

请注意，我们可以添加单个 click event listener到所有列表项的父项，然后我们检查以确保点击是在 A 上通过比较 tagName 来标记.然后我们可以复制textContent从被点击的元素到主元素。