我已经为此奋斗了几个小时(我对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");
});
});