Question

我试图谷歌它，并在SO中找到了一些结果。然而，讨论中的观点与我的不同。

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

如果这个对我来说是一个很好的方式来实现我现在拥有的东西（代码），我应该从那里修改什么。
如果这个不是好方法，我应该通过什么方式改变并实现它。

Oke

方案是：

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

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

之后，如果点击了第二个<li>等，则第一个<li>的主要内容填充的空白div将根据到下一个选择的或下一个点击的<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

使用Click事件而不是更改（顺便说一句，你有一个错字）。

demo

$('#choice li').on("click", function () {
    $('#zen-content').html('' + $(this).html() + '');
});

Answer 2

尝试

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

小提琴：

http://jsfiddle.net/48Qp4/

Answer 3

您需要在click li元素中选择div。示例：http://jsfiddle.net/8TURA/ HTML

<ul id="choice">
    <li>
        Option 1
        <div>option 1 hidden div content</div>
    </li>
    <li>
        Option 2
        <div>option 2 hidden div content</div>
    </li>
    <li>
        Option 3
        <div>option 3 hidden div content</div>
    </li>
    <li>
        Option 4
        <div>option 4 hidden div content</div>
    </li>
    <li>
        Option 5
        <div>option 5 hidden div content</div>
    </li>
</ul>    

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

CSS

#choice div
{
    display:none;
}

JQUERY

$('#choice li').click(
    function()
    {
        $('#zen-content').html($(this).find('div').html());
    }
);

使用所选的<li> </li>填充和更改div的内容

3 个答案: