javascript - 将类别标签添加到“所选<li>的可变内容DIV”中

我在aul中有一些菜单。当用户单击其中一个菜单时，一个DIV中的内容将更改。

----------

<ul id="choice">

    <li> fisrt choice
      <div> hidden div that is going to show in #zen-content </div>
    </li>

    <li>
      <div> hidden div that is going to show in #zen-content </div>
    </li>

    ....
    ....

</ul>


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

我希望：当一个隐藏的div从一个<li>被转移到空白div（它是#zen-conten），那么在#zen-conten中的div将有一个类easyzoom easyzoom--overlay
它将如下所示：

 <div id="zen-content">
     <div class="easyzoom easyzoom--overlay"> it is a hidden DIV from li </div>
 </div>

这是我使用的Jquery：

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

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

提前谢谢。。。

最佳答案

您可以使用jQuery中的<div>方法从选定的<li>元素向addClass元素添加一个类：

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

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