Question

当我点击每个按钮时，我想要“切换”两个div。

向您展示的最佳方式是this example here。

我有我想要的布局和几乎所有的功能，但是没有一个div放在另一个上面（我使用position: absolute;将它们放在同一个“空间”）我希望它们按下按钮时“切换”。

这可能吗？

感谢。

Answer 1

您可以利用.index()：

将它们全部用一个简洁的函数绑定

$('.menu_ind').click(function() {
    var n = $(".menu_ind").index(this);
    $(".about_me").not(":eq(" + n + ")").animate({
        left: '100%'
    }, 800).end().eq(n).animate({
        left: '0'
    }, 800);
});

http://jsfiddle.net/gilly3/dyXY4/12/

Answer 2

你可能正在寻找这样的东西：

http://lab.smashup.it/flip/

Answer 3

如何不使用切换：http://jsfiddle.net/dyXY4/8/

$('#clicker1').click(function() {
    $("#about_me").animate({
        left: '-2000px'
    }, 800);
    $("#about_you").animate({
        left: '0'
    }, 800);
});

$('#clicker2').click(function() {
    $("#about_you").animate({
        left: '-2000px'
    }, 800);

    $("#about_me").animate({
        left: '0'
    }, 800);
});

Answer 4

工作小提琴：http://jsfiddle.net/dyXY4/9/

$('#clicker1').click(function()
{
    if ($("#about_me").css('left') == '2000px')
    {
        $('#about_you').animate({ left: '2000px' }, function ()
        {
            $('#about_me').animate({ left: '0px' });
        });
    }
    else
    {
        $('#about_me').animate({ left: '2000px' });
    }
});

$('#clicker2').click(function()
{
    if ($("#about_you").css('left') == '2000px')
    {
        $('#about_me').animate({ left: '2000px' }, function ()
        {
            $('#about_you').animate({ left: '0px' });
        });
    }
    else
    {
        $('#about_you').animate({ left: '2000px' });
    }
});

Answer 5

当你点击时，告诉所有div滑出，然后只是你想要滑入的那个。这里有一些jQuery：

$(".menu_ind").click(function (e) {
    $('.wrap div').animate({
        left: $(window).width()
    }, 800);
});

$('#clicker1').click(function() {
    $("#about_me").animate({
        left: '0px'
    }, 800);
});

$('#clicker2').click(function() {
    $("#about_you").animate({
        left: '0px'
    }, 800);
});

然后你可以稍微调整你的CSS以隐藏离开屏幕的div，这样你就看不到水平滚动条了。

http://jsfiddle.net/jFe2p/

Answer 6

Here是一个非常扎实的教程，讲述如何发挥我认为你所追求的效果。

基本上它使用jQuery的一些插件Ariel Flesler和一些巧妙的CSS / JavaScript技术。查看演示here。它甚至支持next/prev以及加载给定url哈希的内容。

Answer 7

为您的内容div添加background-color。否则他们会透明。您可能还需要相应地调整高度。

如何使用jQuery切换这两个div？

7 个答案: