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>

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

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

我怎样才能做到最好？ JavaScript的？ JQuery的？的jsfiddle？

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

但我没有幸运能够使用列表。

Answer 1

试试这个：

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

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

＆＃13;

.bakery-item > img {
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
}

＆＃13;

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;
  }
});

＆＃13;

请注意，我们可以向所有列表项的父级添加一个click event listener，然后通过比较A检查以确保点击位于tagName标记上。然后我们可以将textContent从点击的元素复制到主元素。

Answer 3

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

如果是外部html页面，你可以像

那样

HTML

<div id="div2"><div>

jquery

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

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

3 个答案: