Question

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

由于该网站应该面向儿童，我想让它更具互动性和趣味性，并让顶部标签按钮在点击时反弹。然而，我在这方面遇到了一些麻烦。

首先，在我的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

div是块级元素，意味着它们堆叠在一起。

在您的联系页面上，您有一个包含所有链接的div。

而不是div包裹在span中，因为它们默认会从左到右在线运行。

例如

<span class="bounce-tab"><a href = "index.html" class="tab">Home</a></span>

jsfiddle

Answer 2

jQuery和jQuery UI必须在scripts.js之前加载，因为你的代码依赖于它们。

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

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

2 个答案: