Функция jQuery Load не загружает файл

Похоже, что есть несколько областей, которые могут вызывать проблемы — рассмотрите следующие корректировки кода:

Загрузка HTML-страницы

<!-- <div id = "menu"> Remove div with menu id -->

    <ul>    <!-- Add opening ul tag -->
        <li><a href = "index.html">Home</a></li>
        <li>
            <a href = "article.html">Article</a>
            <div class = "uk-navbar-dropdown">
                <ul class = "uk-nav uk-navbar-dropdown-nav">
                    <li><a href = "article.html">Scrollspy</a></li>
                    <li><a href = "article-narrow.html">Narrow</a></li>
                </ul>
            </div>
        </li>
        <li><a href = "faq.html">Faq</a></li>
        <li><a href = "contact.html">Contact</a></li>
        <li><a href = "components.html">Components</a></li>
    </ul>


<!-- </div> Remove extra div -->

Главная HTML-страница

В скрипте на главной HTML-странице рассмотрите возможность расширения обратного вызова load() для отображения ошибки в случае сбоя запроса:

jQuery(document).ready(function(){
    jQuery("#menu").load("menu.html", function(response, status) {
        /* Optional, but consider revising this function to alert on error */
        if (status === 'error') {
            alert("Failed to load menu.html");
        }
        else {
            alert("Success!");
        }    
    });
});

В случае, если во время обратного вызова load() возникает ошибка, вы должны убедиться, что menu.html доступен в указанном (относительном) месте.

В большинстве случаев это можно сделать непосредственно в браузере, перейдя по URL-адресу этого HTML-файла и убедившись, что HTML-ответ соответствует ожидаемому.

Если ваш файл menu.html находится в корневом каталоге вашего сервера (т.е. yourserver.com/menu.html), рассмотрите возможность изменения вашего скрипта для получения menu.htm по абсолютному пути, добавив префикс косой черты /menu.html:

jQuery("#menu").load("/menu.html", function(response, status) {
    ....
});

Обновлять

В качестве альтернативы вы можете рассмотреть этот подход на основе метода ajax():

jQuery(function() {
    jQuery.ajax({
        url: '/menu.html',
        dataType: 'html',
        success: function(data) {
            $('#menu').html(data);
        },
        error: function(xhr, error){
            alert('error. see console for details');
            console.error(error);
        }
    });
});

Обновлять

Кроме того, убедитесь, что контент для вашего веб-сайта/приложения обслуживается с сервера, а не из вашей файловой системы. Есть несколько способов настроить сервер для достижения этой цели. Если вы используете браузер на основе Chrome, то простой способ настроить локальный сервер на вашем компьютере для разработки будет с этим расширением Chrome:

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

После установки вы можете настроить расширение для обслуживания контента из каталога на вашем компьютере разработки через локальный сервер. В этот момент вы получите доступ к своему сайту через http://localhost:[SOME_PORT]/, а не через file:///C:/data/. Доступ к вашему веб-сайту через localhost должен решить проблему для вас.