javascript - 切换 div 的逻辑

Question

我有一个问题。我在这个网站上工作了一段时间，但遇到了一些困难。我已经考虑了好几次，但我不确定该怎么做。

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

我的网站在这里，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 类来处理动画和 Action 。创建一个类将使代码更简洁，并且您可以无限期地添加按钮而不会破坏您的代码。