单击 div 时在两个 div 之间切换答案

【问题标题】：flip between two divs when clicking on the divs单击 div 时在两个 div 之间切换
【发布时间】：2012-11-26 01:51:37
【问题描述】：

我想要和这里的例子一样的翻转：

http://jsfiddle.net/lakario/VPjX9/

我想要的唯一不同是两个 div (page1,page2) 之间的翻转 - 将是当我点击然后而不是按钮时。

代码如下：

HTML:

<button type="button" id="go">FLIP</button>
<div class="container">
     <div class="page1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod mauris    metus, ac consectetur felis. Cras consectetur, est vel malesuada faucibus, ligula enim suscipit elit, ut ornare quam urna quis felis. In hac habitasse platea dictumst.
     </div>
   <div class="page2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum, odio vel   condimentum varius, nibh nunc 
    </div>
</div>


 JS:

$('#go').click(function() {
var page1 = $('.page1');
var page2 = $('.page2');
var toHide = page1.is(':visible') ? page1 : page2;
var toShow = page2.is(':visible') ? page1 : page2;

toHide.removeClass('flip in').addClass('flip out').hide();
toShow.removeClass('flip out').addClass('flip in').show();
});

【问题讨论】：

标签： jquery

【解决方案1】：

简单，只需将您的点击选择器从 $('#go') 更新为 $('.page1, .page2')：

$('.page1, .page2').click(function() {
    var page1 = $('.page1');
    var page2 = $('.page2');
    var toHide = page1.is(':visible') ? page1 : page2;
    var toShow = page2.is(':visible') ? page1 : page2;

    toHide.removeClass('flip in').addClass('flip out').hide();
    toShow.removeClass('flip out').addClass('flip in').show();
});

DEMO

【讨论】：

请告诉我你用过哪个JqueryFlip插件？

【解决方案2】：

只需将您的 javascript 更改为：

$('.container').click(function() {
    var page1 = $('.page1');
    var page2 = $('.page2');
    var toHide = page1.is(':visible') ? page1 : page2;
    var toShow = page2.is(':visible') ? page1 : page2;

    toHide.removeClass('flip in').addClass('flip out').hide();
    toShow.removeClass('flip out').addClass('flip in').show();
});

【讨论】：