Question

当我的网页加载时，我的div设置为display:block，第二个div设置为display:none。

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

目前，我正在尝试这样做，但是当我执行切换时，我不再引用div我已更换，并且无法在它们之间切换。

我不能在屏幕上将Div放在彼此旁边，因为页面是桌面上不同的布局，因此我想知道是否可以切换位置并隐藏其中的位置取代？

这是我的小提琴：

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

我很感激任何帮助。

我尝试在切换之前克隆div，但这也不起作用。

在我的小提琴中，我试图弄清楚，当你勾选方框时，LEFT div用右边的div切换位置，反之亦然

Answer 1

在我的小提琴中，我试图弄清楚当你勾选方框时 LEFT div使用RIGHT div切换位置，反之亦然

你不能这样做吗？

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

<强> jsFiddle example

Answer 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);
});

在JQuery中切换两个div的位置

2 个答案: