jQuery id堆栈失败

Question

对，这可能不好，但我有一个使用jQuery动画元素的安排奇怪的问题。

有太多的代码，来看看在这里穿上所以这里有必要/有问题的文件的链接...

http://epicgiggle.co.uk/test/example/custom.js

http://epicgiggle.co.uk/test/example/index.html

http://epicgiggle.co.uk/test/example/style.css

基本上页脚有5px的填充，当您按下“home”和“about”按钮时，页脚保持不变，但另两页（在右侧）将页脚直接放在相应的divs。我在Chrome上使用内置的“检查元素”功能检查了此操作后的结构，并显示页脚div正好位于另一个div下方;我尝试使用z-index来排列元素，但我意识到它们不应该被堆叠。

这里是我的意思截图：

Answer 1

你的“联系人”和“其他”内容框是float: right，而你的“家”和“约”内容框都没有。如果您移除浮标，则页脚应该表现相同。

作为一个方面说明，您可以通过为这些类创建通用类和通用代码来真正简化代码。完全分开编码每个都会导致类似的问题。

我能简化你的脚本32行（105），包括空格有一些小的HTML变化：

代码：http://jsfiddle.net/jtbowden/ADhLr/

全屏演示：http://jsfiddle.net/jtbowden/ADhLr/embedded/result/

的CSS也比164短很多，但是更重要的是，这个脚本对于所有div都是通用的，所以如果你希望它的行为不同，你只需要做一次修改，如果你添加一个tab，根本不必改变任何脚本。 （请注意，我使用的是jQuery 1.7.2，但您可以使用任何版本的jQuery进行基本相同的简化）。