javascript不支持HTML5

Question

我开始在我的项目中实现一些新的html5功能（标准，没什么特别）。只是标准页眉，页脚，旁边等。出于某种原因，我在过去的项目中使用的JavaScript代码现在不起作用，我无法弄清楚问题所在。

我将代码（html/javascript）与我的新项目和过去的项目（使用javascript工作）进行了比较，我没有看到任何区别。我能想到的唯一的事情就是html版本的改变。

顺便说一句我试图实现一个脚本，突出显示从菜单当前链接。它应该使用javascript在菜单中添加/删除“.selected”代码和锚标签，并与当前页面和链接相关。

这里是代码：

<aside> 
     <section> 
      <Strong>Quick Links</strong> 
       <menu id="side_menu"> 
        <ul> 
         <li><a href="application.php">Sign Up</a></li> 
         <li><a href="testimonials.php">Testimonials</a></li> 
         <li><a href="diploma.php">The Process</a></li> 
         <li><a href="diploma.php">Course Listings</a></li> 
         <li><a href="about.php">American High School</a></li> 
        </ul> 
       </menu> 

     <script> 
      $(document).ready(function() { 
       var loc = window.location.href; // The URL of the page we're looking at 
       $('#side_menu a').each(function() { 
        if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor 
          $(this).addClass('selected'); // Mark it as selected 
        } 
       }); 
      }); 
     </script> 

     </section> 
</aside> 

这里是链接到该网站here（侧面板）

我希望在这个问题上的任何帮助。我花了数小时试图弄清楚这一点。谢谢你的帮助。

gdinari

Answer 1

一个问题是您在尝试使用Prototype之前，已经包含它。将js/prototype.js的脚本标记移动到js/drop-o-matic.js的脚本标记上方。

如果您使用调试器（Chrome的开发工具，Firefox的Firebug，用于IE的脚本调试器，...）它应该告诉你。例如，在这种情况下，Chrome的开发工具向我展示Uncaught TypeError: Object #<an HTMLDocument> has no method 'observe'，它立即指示我朝着正确的方向  —您的DOM加载函数未运行，因为您试图在Prototype添加document.observe之前将其挂起。

---

在修正了上面的问题后，控制台说Uncaught TypeError: Object #<an HTMLDocument> has no method 'ready'。那是因为你试图使用jQuery代码，而不包括jQuery的：

$(document).ready(function() { 
    var loc = window.location.href; // The URL of the page we're looking at 
    $('aside li a').each(function() { 
     if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor 
      $(this).addClass('selected'); // Mark it as selected 
     } 
    }); 
}); 

您可以使用jQuery和原型，如果你喜欢，但如果它只是为片段中，我将其转换为原型代码来代替：

document.observe("dom:loaded", function() { 
    var loc = window.location.href; // The URL of the page we're looking at 
    $$('aside li a').each(function(link) { 
     if (loc.indexOf(link.href) !== -1) { // If the URL contains the href of the anchor 
      link.addClassName('selected'); // Mark it as selected 
     } 
    }); 
}); 

如果您在其他地方使用jQuery代码，你要包括jQuery和使用jQuery.noConflict，允许原型保持$符号（你有你想要jQuery的使用jQuery代替函数，或使用jQuery加载函数作为范围函数）。