Question

我在ul中有一些菜单。当用户单击其中一个菜单时，一个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>
....
....
....

我想要那个：当<li>之一的隐藏div被转移到空白div（它是#zen-conten）时，那里的div就是#zen-conten将有一个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());
    }); 
});

提前致谢...

Answer 1

您可以使用 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');
  }); 
});

Answer 2

尝试此代码并在此处查看实时演示：http://jsfiddle.net/7N3gW/

<ul id="choice">

    <li> fisrt choice 
      <div> first </div>
    </li>

    <li> secnd
      <div>second</div>
    </li>

</ul> 

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

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

将类标记添加到“所选<li>”的可更改内容DIV </li>

2 个答案: