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

Question

对于一个类，我们正在设计一个网站(可以在此处找到:http://web.cs.dal.ca/~webucat/)，我正在尝试一下。

由于该网站应该面向 child ，所以我想让它更具互动性和趣味性，并让顶部的标签按钮在被点击时弹起。但是，我在执行此操作时遇到了一些麻烦。

首先，在我的 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 再次工作，并让按钮弹跳吗？提前致谢。

Answer 1

jQuery 和 jQuery UI 必须在您的 scripts.js 之前加载，因为您的代码依赖于两者。

加载额外版本的 jQuery (1.3) 只会增加更多问题....只加载一次 jQuery