jQuery не загружает внешний шаблон html с помощью .load()

Question

Я пытаюсь использовать jQuery для изменения основной области содержимого моей домашней страницы при нажатии на ссылку навигации. Я использую .load() для этого, но внешняя html-страница, на которую я ссылаюсь, просто не загружается (ничего не происходит).

custom.js

$(document).ready(function(){ 
    $("#about").click(function(event){ 
    event.preventDefault(); 
     $(".main-content").fadeToggle("slow", function(){ 
     $(this).load("about-us.html") 
     }); 
    }); 
}); 

index.html

<div class="inner cover main-content"> 
    <h1 class="cover-heading">A heading</h1> 
    <p class="lead">This is the best page of all time.</p> 
</div> 

Answer 1

Фигурные я отвечу на свой вопрос, так как он взял часы, чтобы выяснить что-то такое тривиальное.

Если вы загружаете jQuery локально, вы должны запускать файл с использованием локального веб-сервера, такого как MAMP, а не просто «нажимать» на него (например, загружать файл в браузере).

jQuery не загружает внешние файлы, если они не обслуживаются с какого-либо веб-сервера.

Если вы проверите консоль, вы увидите сообщение об ошибке, которое говорит что-то вроде:

MLHttpRequest cannot load file:///Users/yourname/filepath/index.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.