我已经为此奋斗了几个小时(我对js还是有些陌生),所以我决定将其发布给社区。我有一个正在构建的Web应用程序,它完全基于屏幕尺寸的百分比。 div是固定位置,这些div中的内容绝对是。这是小提琴:http://jsfiddle.net/MycF6/31/和我正在使用的代码:

$(document)
    .ready(function () {
    $("#socialDash")
        .click(function () {
        $("#socialStream")
            .hide("slide", {
            direction: "left"
        }, "1000");
    });
});

$("#socialDash")
    .click(function () {
    $("#workBench")
        .effect("scale", {
        percent: 178,
        origin: ['middle', 'right'],
        direction: 'horizontal'
    }, 700);
});

$("#niner")
    .click(function () {
    $("#socialStream")
        .show("slide", {
        direction: "left"
    }, "1000");
    $("#workBench")
        .effect("scale", {
        percent: 56,
        origin: ['middle', 'right'],
        direction: 'horizontal'
    }, 500);
});

$(".socialButton")
    .click(function () {
    $("socialButton")
        .removeClass(".clicked");
    $(this)
        .addClass(".clicked");
});


我想要它,所以当我单击左侧的顶部按钮(1)时,内部内容的左侧div会向左滑动,而右侧的div会展开以取代它的位置。对于其他两个按钮(2),(3),我希望div保持原始比例。另一个问题是,当单击按钮(imgs)时,它们的背景保持不变,而不是像我试图在代码的最后一点中那样切换到下一个单击的按钮。

任何帮助将不胜感激。提前致谢!

最佳答案

好的,我找到了解决方案(基本上我重写了所有内容)。它不漂亮,但是可以用。这是新的jfiddle:http://jsfiddle.net/MycF6/42/(如果您有兴趣)。

和脚本:

$(document).ready(function () {
    $("#dash").click(function () {
        $("#stream").animate({
            width: "0"
        }, "fast").hide("slide", {
            direction: "left"
        }, "fast");
        $("#dash").addClass("clicked");
        $("#fb").removeClass("clicked");
        $("#twit").removeClass("clicked");
        $("#work").animate({
            width: "100%"
        }, "slow");
    });
    $("#twit").click(function () {
        $("#work").animate({
            width: "59%"
        }, "fast");
        $("#twit").addClass("clicked");
        $("#dash").removeClass("clicked");
        $("#fb").removeClass("clicked");
        $("#stream").animate({
            width: "40%"
        }, "fast").show("slide", {
            direction: "left"
        }, "slow");
    });
    $("#fb").click(function () {
        $("#work").animate({
            width: "59%"
        }, "fast");
        $("#twit").removeClass("clicked");
        $("#dash").removeClass("clicked");
        $("#fb").addClass("clicked");
        $("#stream").animate({
            width: "40%"
        }, "fast").show("slide", {
            direction: "left"
        }, "slow");
    });
});

07-24 09:50
查看更多