-2

我需要一些帮助。

我试图在 JSFiddle 上做一个简单的项目，但我无法让它工作。 http://jsfiddle.net/reUyp/2/

这是代码

HTML：

<div id="img0">
    <b class="i01">ONE</b> <b class="i02">TWO</b>　<b class="i03">THREE</b>
</div>

<div style="width:200px; height:500px; background-color:red;" id="i01"></div>
<br>

<div style="width:200px; height:500px; background-color:blue;" id="i02"></div>
<br>

<div style="width:200px; height:500px; background-color:green;" id="i03"></div>
<br>

JavaScript：

$(function(){
    $('#img0 b').click(function(){
        CL=$(this).attr('class')
        st=$('#'+CL+'').offset().top;       
        $('body,html').animate({scrollTop: st}, 500);
        return false;
    });
});

我想要的是，当您单击其中一个单词时，页面应滚动到相应的彩色 div。但它不...

我错过了什么？我敢肯定这是一件非常愚蠢的事情......

哦，实际上有更好的方法来实现这一点吗？

4

3 回答 3

1

由于您使用的是 jQuery，因此您必须将其包含到您的 jsFiddle 项目中。在左上角选择它，您的示例将起作用。

同样在您自己的项目中，您必须包含 jQuery，例如：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

在 html 页面的头部内部。

于 2013-10-06T14:55:30.717 回答
1

您正在尝试使用 jQuery 语法，但尚未在Frameworks & Extensions侧边栏中加载 jQuery。选择jQuery 1.9.1并且您的代码可以正常工作。

于 2013-10-06T14:55:54.303 回答
0

看到这个，这是你的正确答案。

小提琴here

于 2013-10-06T15:01:18.117 回答