Question

我使用此source在单个页面中使用不同的部分。该演示工作正常，但当我使用这些代码时，它根本不会工作。这是代码：

HTML：

<nav>
    <a class="nav" id="1" href="#">Section 1</a>
    <a class="nav" id="2" href="#">Section 2</a>
    <a class="nav" id="3" href="#">Section 3</a>
</nav>
<div class="section" id="1">
    Section 1
</div>
<div class="section" id="2">
    Section 2
</div>
<div class="section" id="3">
    Section 3
</div>

的CSS：

a {
    margin: 0 10px 0 10px;
    text-decoration: none;
    color: black;
}

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

nav {
    position: fixed;
    width: 100%;
    background-color: lightgrey;
    text-align: center;
    margin-bottom: 20px;
}

.section {
    height: 100%;
    padding-top: 20px;
}

JS：

    <script type="text/javascript">
$('.nav').click(function() {
    var id = $(this).attr('id');
    $('html, body').animate({
        scrollTop: ($('#' + id + '.section').offset().top)
    }, 1000);
});
</script>

这正是我正在使用的，但它不会起作用。我认为js代码存在问题。我该如何解决这个问题？

提前致谢

Answer 1

首先确保你已经包含了jQuery。然后你需要编写你的脚本

$(document).ready(function(){
    // your code goes here

});

或简而言之

$(function(){
    //your code goes here 

});

DOM准备就绪时调用这两个函数。从而确保事件和处理程序正确绑定到元素。

Check this out

Answer 2

您的代码运行正常。您可能没有包含jquery库。使用此结构

<html>

<head>
<link href="style.css" type="text/css" rel="stylesheet" />



</head>

<body>
<nav>
<a class="nav" id="1" href="#">Section 1</a>
<a class="nav" id="2" href="#">Section 2</a>
<a class="nav" id="3" href="#">Section 3</a>
</nav>

<div class="section" id="1">
Section 1
</div>
<div class="section" id="2">
Section 2
</div>
<div class="section" id="3">
Section 3
</div>


<script src="jquery-2.1.3.min.js"></script>
<script src="script.js"></script>

</body>
</html>

单页中的不同部分

2 个答案: