切换Div的逻辑

Question

我有一个问题。我已经在这个网站上工作了一段时间，我打了一个砖墙。我已经想过这几次了，我不知道怎么回事。

我在页面上有5种不同的内容配置，我需要在它们之间进行切换。应该发生的是，当用户点击按钮时，应该发生一系列动画，并最终将按钮和顶部替换为按下的按钮。位于顶部的那个应该返回其原始位置（“Home”应该始终位于顶部，“About”应该始终位于其下方，除非它是当前页面。）

我的网站就在这里，http://www.logicanddesign.ca，所有的javascript都可供您查看。你们提供的任何帮助都会有所帮助。我想在不完全重写我的网站的情况下这样做，但如果这是唯一的方法，我会的。

Answer 1

嗯，我要指出的第一件事是你将button_click函数与图像相关联，而不是包含它们的div。最好使用div标签进行事件处理。

其次，您只需移动当前按钮和按下的按钮。要实现您的目标，您需要在buttonPressed和currentPage的默认位置之间移动按钮。

此外，您不能仅仅为按下的按钮静态定义moveUp函数，而不是其他任何内容。因为有时您需要在按下的按钮和当前按钮之间移动按钮。

正如您所知，当您将div设置为动画时，您需要考虑中间移动。可能在moveDivs函数中。

I made a fiddle representing what changes you could do to achive required effect, but I feel what I have written is a mess.那种值得噩梦的混乱，真的......

在我看来，你可以创建一个javascript类来处理动画和动作。创建一个类将使代码更清晰，你可以无限制地添加按钮而不会破坏你的代码。