Fatal编程技术网
  • javascript/
  • Javascript 具有不同内容的多个菜单

Javascript 具有不同内容的多个菜单

javascript jquery html css menu

Javascript 具有不同内容的多个菜单,javascript,jquery,html,css,menu,Javascript,Jquery,Html,Css,Menu,我正在尝试将sidr用于我正在构建的网站 该网站由一个可滚动的长页面组成。它包含3个锚点div，并加载到第二个锚点上，以便可以上下滚动。 到目前为止，这是可行的，但当我尝试实现sidr菜单时（我需要3个不同的文本来显示，文本1打开时带有一个位于锚定div 1中的按钮，等等），但我甚至无法获得最简单的版本来工作，即使我从网站复制示例代码时也是如此 这就是我现在拥有的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "h

我正在尝试将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>
我做错了什么？我是javascript新手，所以我不确定是否在所有正确的位置加载了脚本。

您在两个不同的位置关闭了太多的
div
元素（3个结束标记对应2个开始标记）。此外，
脚本
标记将按照您放置它们的顺序进行分析，这意味着如果您在实际加载此函数的代码之前调用
.sidr（）
函数，它将无法工作

您将
.sidr（）
菜单元素定位错误：您告诉链接是菜单本身！以下是如何正确启动
.sidr（）
：

$('#myLink').sidr({
    name: 'TheTargettedContainerWhichWillBecomeTheHiddenSidrMenu',
    side: 'left' /* Pretty self explanatory */  
});
HTML 

Konijntjes试验
函数moveWindow（）{
window.location.hash=“mylocation”；
}
$（文档）.ready（函数（）{
$（'#menu1'）.sidr({
名称：“第1页”，
side:'左'//默认情况下
});
$（'#menu2'）.sidr({
名称：“第2页”，
一边：“对”
});
$（'#menu3'）.sidr({
名称：“第3页”，
侧面：“左”
});
});
迪尔2
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯孕妇阿利奎姆·奥迪奥。在威尼斯的葡萄品种中，有两种不同的葡萄品种。这是欧盟自由主义的一大障碍。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Donec euismod odio erat，一位社会精英。Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯孕妇阿利奎姆·奥迪奥。在威尼斯的葡萄品种中，有两种不同的葡萄品种。这是欧盟自由主义的一大障碍。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Donec euismod odio erat，一位社会精英。Aliquam aliquet malesuada处的直径。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名

Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯孕妇阿利奎姆·奥迪奥。在威尼斯的葡萄品种中，有两种不同的葡萄品种。梅塞纳斯东南部

Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯孕妇阿利奎姆·奥迪奥。在威尼斯的葡萄品种中，有两种不同的葡萄品种。梅塞纳斯东南部

迪尔3
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯孕妇阿利奎姆·奥迪奥。在威尼斯的葡萄品种中，有两种不同的葡萄品种。这是欧盟自由主义的一大障碍。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Donec euismod odio erat，一位社会精英。Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯孕妇阿利奎姆·奥迪奥。在威尼斯的葡萄品种中，有两种不同的葡萄品种。这是欧盟自由主义的一大障碍。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Donec euismod odio erat，一位社会精英。Aliquam aliquet malesuada处的直径。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名

Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯孕妇阿利奎姆·奥迪奥。在威尼斯的葡萄品种中，有两种不同的葡萄品种。梅塞纳斯东南部
在执行jQuery代码之前，始终包括jQuery库。您颠倒了包含脚本的方式。将jQuery库脚本标记放在您的个人代码之前。我尝试过切换位置，但这似乎也不起作用。jquery库代码到底是哪一部分？我试着查找，但我得到了很多不同的东西…对于一个网站，我正在建设“不太适合这个。。。我们在21世纪！使用这是我的编辑器自动输入的内容，甚至没有注意到，谢谢。@Kelly
指定您将编写一个HTML5网站，而您代码中的一个是HTML4.01（不太旧，但也不是最后一个）。JS现在似乎很好：您包括了
JQuery
，然后是它的插件，然后是您使用的代码，或者需要库及其插件。哦，等等，但是div id sidr 1中的内容仍然没有“隐藏”在sidr菜单中？您的意思是它没有包含您的菜单？然后只需将
$.sidr（）
对象的
name
属性更改为
sidr1
，而不是
page1
。 
$('#myLink').sidr({
    name: 'TheTargettedContainerWhichWillBecomeTheHiddenSidrMenu',
    side: 'left' /* Pretty self explanatory */  
});