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進行基本相同的簡化）。