javascript - 使用选择的 <li> 填充和更改 div 的内容

Question

我试着用谷歌搜索它并在 SO 中找到了一些结果。然而，讨论的重点与我的不同。

在任何人接受我的问题之前，我想先说清楚我真正想从这里得到什么。如下；

1. 如果这是我用我现在拥有的东西(代码)实现我需要的东西的好方法，我应该从那里修改什么。

2. 如果这不是好的方式，我应该“通过什么方式”改变并实现它。

---

好的

---

场景是:

我至少有五个 <li> <ul> 中的菜单.在每个<li> , 有一些隐藏的 div，所以 <li>只会显示 <li> 的标题但不显示主要内容或隐藏的 div。

然后，我有一个空白的 div，我希望它自动被从第一个 中隐藏的主要内容填充 <li> .

在那之后，如果第二个<li>等等点击，空白div已经被第一个<li>的主要内容填充了将根据下一个选择或下一个点击进行更改<li> .

我一直在使用的这个脚本在这里，但它不起作用。

$('#zen-content').html($('#choice').val()); 
     $('#choice').change(function(event) {
         $('#zen-content').html('' + $('#choice').li()+ '');
}); 

这是我的 html:

    <ul id="choice">
        <li> fisrt choice <div>hidden div that is going to show in blank div</div></li>
        <li> second choice <div>hidden div...</div> </li>
        <li> third choice <div>hidden div...</div </li>
        <li> last choice <div>hidden div...</div </li>
    </ul>   



    <div id="zen-content">blank div</div>

Answer 1

尝试

$(document).ready(function(){
    $('#zen-content').html($('#choice li:first').html()); 
    $('#choice li').click(function(event) {
        $('#zen-content').html( $(this).html());
    }); 
});

fiddle :

http://jsfiddle.net/48Qp4/