javascript - jQuery won't load external html template using .load() -

i'm attempting use jquery change main content area of homepage when nav link clicked. i'm using .load() this, external html page i'm referencing won't load (nothing happens).

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 best page of time.</p> </div> 

figured i'd answer own question since took hours figure out trivial.

if you're loading jquery locally, must run file using local web server mamp rather "clicking" on (e.g. loading file in browser).

jquery won't load external files if aren't served kind of web server.

if check console, you'll see error says like:

mlhttprequest cannot load file:///users/yourname/filepath/index.html. cross origin requests supported protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.