我正在尝试将 sidr 用于我正在构建的网站。
该网站由一个可滚动的长页面组成。它包含 3 个锚 div，它加载到第二个锚上，以便您可以上下滚动。到目前为止，这是可行的，但是当我尝试实现 sidr 菜单时（我需要显示 3 个不同的文本，文本 1 打开一个位于锚 div 1 中的按钮等），但我什至无法获得最简单的版本工作，即使我从网站复制示例代码也是如此。
这就是我现在所拥有的；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Konijntjes TEST</TITLE>
<script>
$(document).ready(function() {
$('#menu1').sidr({
name: 'menu1',
side: 'left' // By default
});
$('#menu2').sidr({
name: 'menu2',
side: 'right'
});
$('#menu3').sidr({
name: 'menu3',
side: 'left'
});
});
</script>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
</head>
<body onload="moveWindow()">
<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
<script type="text/javascript" language="javascript">
function moveWindow (){window.location.hash="mylocation";}
</script>
<div class="container">
<!--- PAGE 2 --->
<div class="page2">
<h1>Deel 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a id="menu1" href="#menu1">Menu 1</a>
<div id="sidr 2">
<!-- Your content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
</div>
<!--- PAGE 1 --->
<a name="mylocation"><div class="page1"><div class="pagecontainer">
<h1>This should be the beginning.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a id="menu2" href="#menu2">Menu 2</a>
<div id="sidr 1">
<!-- Your content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
</div>
</div>
</div></a>
<!--- PAGE 3 --->
<div class="page3">
<h1>Deel 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a id="menu3" href="#menu3">Menu 3</a>
<div id="sidr 3">
<!-- Your content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
</div>
</div>
</div>
</body>
</html>
这是我拥有的 css，加上另一个文档中的 sidr css。
body {
font-family: verdana;
line-height: 1.2em;
font-size:1.1em;
}
p { width: 100%;
}
.container {
margin: 0px auto;
width: 800px;
}
h1 {
padding-bottom: 2em;
}
.pagecontainer {
padding-top:9.8em;
padding-bottom:10.2em;
}
.page1 {
padding-top:2em;
}
.page2 {
padding-top:2em;
}
.page3 {
padding-top:2em;
padding-bottom: 3em;
}
我究竟做错了什么？我是 javascript 新手，所以我不确定我是否在所有正确的地方加载了脚本。