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> 

Вот ссылка на сайт здесь (боковая панель)

Буду признателен за любую помощь по этому вопросу.Я часами пытался понять это.Спасибо за любую помощь.

gdinari

Answer 1

Одна проблема заключается в том, что вы пытаетесь использовать Prototype, прежде чем включить его. Переместите тег сценария для js/prototype.js над тегом сценария для js/drop-o-matic.js.

Если вы используете отладчик (Chrome Dev Tools, Firebug для Firefox, Script Debugger для IE, ...), он должен сообщить вам об этом. Например, в этом случае инструменты разработчика Chrome показали мне Uncaught TypeError: Object #<an HTMLDocument> has no method 'observe', что сразу указало мне правильное направление & mdash; ваша загруженная 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, что позволяет Prototype сохранять символ $ (вместо этого вы должны использовать jQuery где вы хотите использовать функцию jQuery или использовать функцию загрузки jQuery в качестве функции области видимости).