JavaScript无法与HTML5一起使用

我开始在我的项目中实现一些新的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(侧面板)的链接

在这个问题上的任何帮助,我将不胜感激.我花了几个小时试图解决这个问题.谢谢你的帮助.

吉迪纳里

最佳答案

一个问题是您尝试在包含原型之前尝试使用它.将js / prototype.js的脚本标签移到js / drop-o-matic.js的脚本标签上方.

如果您使用调试器(Chrome的开发工具,Firefox的Firebug,IE的脚本调试器,…),它应该告诉您.例如,在这种情况下,Chrome的开发工具向我显示了Uncaught TypeError：对象#< HTMLDocument>.没有方法’observe’,该方法立即向我指出正确的方向-您的DOM加载函数未运行,因为您试图在Prototype添加document.observe之前将其连接起来.

解决上述问题后,控制台会显示Uncaught TypeError：Object#< HTMLDocument>.没有方法“就绪”.那是因为您尝试使用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,这允许Prototype保留$符号(必须在需要jQuery函数的位置使用jQuery代替,或者将jQuery load函数用作作用域功能).

JavaScript无法与HTML5一起使用

相关文章