为什么我的 div 会损坏，为什么我的弹跳效果不起作用？

对于一个类，我们正在设计一个网站（可以在这里找到：http://web.cs.dal.ca/~webeduct/），我有点玩。

由于该网站应该面向儿童，我想让它变得更具互动性和趣味性，并让顶部的选项卡按钮在点击时弹出。然而，我在做这件事时遇到了一些麻烦。

首先，在我的HTML中，我为所有链接添加了div，这样我就可以使用jQuery访问按钮以获得反弹效果，但当我这样做时，似乎破坏了我的CSS。（请参阅：除联系人页面外的所有页面，我在其中删除了div。）

以下是导航选项卡HTML:

<div id = "links">
    <div class="bounce-tab"><a href = "index.html" class="tab">Home</a></div>
    <div class="bounce-tab"><a href ="math.html" class="tab">Learn Math</a></div>
    <div class="bounce-tab"><a href ="geography.html" class="tab">Learn Geography</a></div>
    <div class="bounce-tab"><a href ="spelling.html" class="tab">Learn Spelling</a></div>
    <div class="bounce-tab"><a href ="music.html" class="tab">Learn Music</a></div>
    <div class="bounce-tab"><a href ="contact.html" class="tab">Contact Teacher</a></div>
</div>

此外，我的jQuery似乎不适用于按钮反弹。我到处搜索过，我认为我正确地实现了代码（见鬼，我甚至在jsfiddle上运行了它：http://jsfiddle.net/gzWb3/它很有效），我甚至在StackOverflow上环顾四周，但似乎我在大多数情况下都做得很好，但只是一些小问题不起作用，但在仔细考虑代码后，我似乎无法理解。

这是jQuery:

$(document).ready(function() {
    // Add bounce effect to the navigational tabs that active on click
    $(".bounce-tab").click(function () {
        $(this).effect("bounce", { times:3 }, 300);
    });
});

这是我在HTML:中对它的引用

<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

所以，基本上，有人能帮我让我们的CSS重新工作，并让按钮弹出吗？提前谢谢。