使用所选的< li>填充和更改div的内容。 [英] fill and change the content of div with the chosen <li>

问题描述

我试图google，并发现一些结果在SO。然而，讨论中的点与我的不一样。

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

1. 如果这是我实现我需要的我现在（代码），我应该从那里修改。




2. 如果此不是好方法，应该通过什么方式更改并实现。





---





情况是：





< ul> 中至少有五个< li> 在每个< li> 中，有一些隐藏的div，所以< li> < li> 但不显示主要内容或隐藏的div。





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



之后，如果点击了第二个< li> 已经由第一< li> 的主要内容填充的空白div将根据下一个选择的或下一个被点击的 li> 。





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

  $（'＃zen-content'）。html（$（'＃choice'）。 
 $（'＃choice'）。change（function（event）{
 $（'＃zen-content'）。html（''+ $（' ''）; 
}）; 
  

这里是我的html：

 < ul id =choice> 
< li> fisrt选项< div>隐藏的div将显示在空白div中< / div>< / li> 
< li>第二个选项< div> hidden div ...< / div> < / li> 
< li>第三个选项< div> hidden div ...< / div< / li> 
< li>最后一个选项< div> hidden div ...< / div< / li> 
< / ul> 
 
 
 
< div id =zen-content> blank div< / div> 
  




解决方案

尝试

  $（document）.ready（function（）{
 $（'＃zen-content'）。html ）.html（））; 
 $（'＃choice li'）。click（function（event）{
 $（'＃zen-content'）。html ））; 
}）; 
}）; 
  

小提琴：





http://jsfiddle.net/48Qp4/




I have tried to google it and found some results in SO. However the point in the discussion is not same as mine.

Before anyone can accept my question, I want to make it clear first what I really want to get from here. As follows;

1. If this is a good way for me to achieve what I need with what I have now (the codes), what should I modify from there.

2. If this is not the good way, 'by what way' should I change and achieve it.

---

Oke

---

The scenario is:

I have at least five <li> menus in a <ul>. In each <li>, there are some hidden divs so that the <li> will only show the title of that <li> but not showing up the main content or the hidden divs.

And then, I have a blank div that I want it to automatically be filled by the main content that is being hidden from the first <li>.

After that, if the second <li> and so on is clicked, the blank div that has been filled by the main content of the first <li> will be changed according to the next chosen or the next clicked <li>.

This script that I have been using is here, but it doesnt work.

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

And here is my 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/

这篇关于使用所选的< li>填充和更改div的内容。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！