使用所选的

填充并更改 div 的内容

我尝试用谷歌搜索它并在 SO 中找到了一些结果。不过讨论的重点和我的不一样。

在任何人接受我的问题之前，我想首先明确我真正想从这里得到什么。如下;

1. If this对我来说，用我现在拥有的（代码）实现我需要的东西是一个好方法，我应该从那里修改什么。

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

Oke

场景是：

我至少有五个<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>

Try

$(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/ http://jsfiddle.net/48Qp4/