单击div时在两个div之间切换 [英] flip between two divs when clicking on the divs

问题描述

我想和示例中的东西一样翻转:

I want to have the same flip thing as here in the example:

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

我想要的唯一区别是两个div(第1页，第2页)之间的翻转-当我单击按钮而不是按钮时.

the only different that I want is that the flip between the two div's(page1,page2) - will be when I'm clicking on then and not with a button.

下面是代码:

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();
});​

推荐答案

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

Simple, just update your click selector from $('#go') to $('.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();
});​

演示

这篇关于单击div时在两个div之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！