2015-02-09 46 views
0

当我的页面加载时,我的div设置为display:block,第二个div设置为display:none在jQuery中切换两个div的位置

我有一个切换开关,我想用隐藏的div替换显示的div。

目前,我试图做到这一点,但是当我执行开关时,我不再提及已替换的div,并且无法在它们之间切换。

我不能在HTML中将div放在另一个旁边,因为页面是桌面中的不同布局,所以我想知道是否可以切换位置并隐藏被替换的位置?

这是我的小提琴:

http://jsfiddle.net/javacadabra/mdqmto9u/

我会很感激的任何帮助。

我试图在切换它们之前克隆divs,但那也行不通。

在我的小提琴,我想,这样当你用正确的DIV检查框中的左侧DIV开关位置,反之亦然

+1

难道你只是['toggle()'](http://api.jquery.com/toggle/)他们?顺便提一句,请花时间在问题中包含代码,不要依赖外部网站。 – 2015-02-09 16:59:48

+0

我不能,因为它是一个响应式布局,在我的桌面版本上,div由中央div分隔。基本上当我低于某个屏幕宽度时,我将div隐藏在最右侧。 – Javacadabra 2015-02-09 17:00:27

+0

你想只为更小的屏幕做这个吗?如果是这样,请使用CSS @media标记 – Steve 2015-02-09 17:04:35

回答

4

在我的小提琴,我试图让它这样得到它当你检查框 LEFT div开关的位置与右分区,反之亦然

难道你不能这样做吗?

$('#check').change(function() { 
    if ($(this).is(':checked')) { 
     $('#div3').insertBefore($('#div2')); 
     $('#div1').insertAfter($('#div2')); 
    } else { 
     $('#div3').insertAfter($('#div2')); 
     $('#div1').insertBefore($('#div2')); 
    } 
}); 

jsFiddle example

+1

感谢您的帮助 – Javacadabra 2015-02-09 17:12:31

2

这里是另一种解决方案,只改变的内容。如果你想要改变你的类,等等,你可以调整你的布局,将CSS应用到div的innerHTML。小提琴:http://jsfiddle.net/e9aa84ry/

$('#check').change(function(){ 
    var left = $('#div1').html(); 
    var right = $('#div3').html(); 
    $('#div1').html(right); 
    $('#div3').html(left); 
});