Javascript jquery-按钮在固定百分比web应用中调整固定div的大小？

我已经为此奋斗了几个小时了（我对js有点陌生），我决定把它推广到社区。我有一个我正在构建的web应用程序，它完全基于屏幕大小的百分比。div是固定位置的，这些div中的内容是绝对的。这是小提琴：我正在使用的代码：

$(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。另一个问题是，当单击按钮（IMG）时，它们的背景会保持不变，而不是像我在最后一段代码中尝试识别的那样切换到下一个单击的按钮

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

好吧，我找到了解决办法（基本上我重写了所有内容）。它不漂亮，但很管用。这是新的jfiddle：如果你感兴趣的话

还有剧本：

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

---

人们可能不同意这一说法，但总的来说，我发现从一开始就考虑到绝对定位的设计会让人头疼。绝对位置应作为最后手段使用，如果不是的话。