1

我已经为此奋斗了几个小时（我对 js 有点陌生），我决定把它提交给社区。我正在构建这个基于屏幕尺寸百分比的网络应用程序。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）时，它们的背景保持不变，而不是像我试图在最后一段代码中识别的那样切换到下一个单击的按钮。

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

4

1 回答 1

0

好的，我找到了解决方案（基本上我重写了所有内容）。它不漂亮，但它有效。这是新的 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");
    });
});
于 2013-04-09T17:38:09.893 回答