javascript - 切换 div 的逻辑

标签 javascript css html dom

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

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

我的网站在这里,http://www.logicanddesign.ca,所有的javascript都开放给你看。你们能提供的任何帮助都会很有帮助。我想在不完全重写我的网站的情况下执行此操作,但如果这是唯一的方法,我会这样做。

最佳答案

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

其次,您只移动当前按钮和按下的按钮。要实现您想要的效果,您需要在 buttonPressedcurrentPage 的默认位置之间移动按钮。

此外,您不能只为按下的按钮静态定义 moveUp 函数而没有其他任何东西。因为有时您需要在按下的按钮和当前按钮之间向上移动按钮。 enter image description here

显然,当您将 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 。创建一个类将使代码更简洁,并且您可以无限期地添加按钮而不会破坏您的代码。

关于javascript - 切换 div 的逻辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12885351/

相关文章:

javascript - 使用 Inspect Element 应用 JavaScript 更改

javascript - 如何在 JavaScript 中清除 Session?

javascript - jQuery 从 UL 层次结构中删除类,除了

javascript - javascript 中的词频统计?

javascript - 为什么在点击时从 iframe 中删除属性?

html - 如何将 div 一个并排对齐,并在另一个 div 上对齐

javascript - 自定义 Bootstrap 4 全屏轮播错误 : wrong correspondence between control and caption

html - 事件 div 类和显示 :block

javascript - 在原型(prototype) javascript 中按类名读取属性

javascript - 如何正确使用带有 lodash debounce 的 Vue JS watch