使用所选的填充和更改div的内容

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

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

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

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

---

奥凯

---

场景是：

我在

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

  然后，我有一个空白div，我希望它自动被第一个

• 隐藏的主要内容填充。

  之后 ，如果单击第二个

• 等，则第一个
• 的主要内容填充的空白div将根据下一个选择的或下一个单击的
• 进行更改。

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

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

  这是我的HTML：

    
   
   fisrt choice 
  hidden div that is going to show in blank div
   
   second choice 
  hidden div...
   
   
   third choice 
  hidden div...</div 
   
   last choice 
  hidden div...</div 
   
   
  blank div 

  Answer 1

  尝试

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

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

  演示

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

  Answer 3

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

   
   
   Option 1 
  option 1 hidden div content
   
   
   Option 2 
  option 2 hidden div content
   
   
   Option 3 
  option 3 hidden div content
   
   
   Option 4 
  option 4 hidden div content
   
   
   Option 5 
  option 5 hidden div content
   
   
   
   

  CSS

   #choice div { display:none; } 

  JQUERY

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