JavaScript在HTML5中无法工作

Question

JavaScript在HTML5中无法工作

javascriptcsshtml

4

我开始在我的项目中实现一些新的HTML5功能（标准，没有花哨的东西），比如标准的header、footer、aside等。但由于某些原因，我之前用过的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>

这是该网站的链接：这里（侧边栏）。我需要关于这个问题的任何帮助，因为我已经花了几个小时来解决它。谢谢你的帮助。

- gdinari

你是否同时使用Prototype和jQuery？或者其他的js框架？我曾在客户购买的“即插即用”软件包上遇到过这个问题，我不得不为jQuery设置noConflict。这也可能是你的情况。 - Kyle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

一个问题是您正在尝试在包含Prototype之前使用它。请将js/prototype.js的脚本标签移动到js/drop-o-matic.js的脚本标签之前。

如果您使用调试器（Chrome的开发工具，Firefox的Firebug，IE的Script Debugger等），它应该会告诉您原因。在这种情况下，例如，Chrome的Dev Tools向我显示了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和Prototype技术。但是，如果只是为了这个代码片段，我建议将其转换为Prototype代码：

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.noConflict查看）。这将允许Prototype保留$符号（需要使用jQuery代替$来调用jQuery函数，或者使用jQuery的load函数作为作用域函数）。