将html加载到div,使用带href的查询，通过单击将html加载到div中

I'm trying to change content in a div depending on a href-clicking. I'm a newbie at freeform scritpting so please be gentle on me.

So, I have this index.html with a

where I load three different local html pages (menu.html) -> restaurant menus. At the head of each menu.html I would like to have -links for changing menu in the placed in the index.html.

My question is:

How to I call for index.html once my href-link that I call with my script is situated inside of menu.html?

So far I have:

index.html loads the menu 'alacarte.html' in div id: 'result' by default.

I want to press link in 'alacarte.html' that makes say 'pizza.html' load in index.html div id: 'result'.

I really want the links to be placed graphically on top of the say 'pizza.html'-page.

In my index.html I have:

$(document).ready(function(){

$("#alacarte").click(function(){

$('#result').load('alacarte.html');

});

$("#beverage").click(function(){

$('#result').load('pizza.html');

});

$("#beverage").click(function(){

$('#result').load('beverage.html');

});

});

$(document).ready(function(){

$( '#result' ).load( 'alacarte.html' );

});

And in the menu page 'alacarte.html'

BEVERAGE

$(document).ready(function(){

$("#alacarte").click(function(){

$('index.html#result').load('alacarte.html');

});

$("#beverage").click(function(){

$('index.html#result').load('beverage.html');

});

$("#pizza").click(function(){

$('index.html#result').load('pizza.html');

});

}

I hope you can follow my futile explanation. How should I do it?

Please help!