Usually, what I do is create a route handler full of url hashes mapped to urls. That way, when I listen for a window hashchange event, I can route to that hash's corresponding url. The object would look like this:
var router = {
"#ajax" : "http://fiddle.jshell.net"
};
Then I use this object to acquire html from the url asynchronously, using the router and a jquery get request (on hashchange):
$(window).on("hashchange", function(){
var route = router[location.hash];
if (typeof route === 'undefined') return;
$.get( route, function( data ) {
$( ".sliderContent" ).html( data );
});
});
As you can see from the jquery get's callback, the ajax data retrieved is injected into the DOM in the sliderContent div. I hope this helps :)
See the working jsfiddle here: http://jsfiddle.net/zrLLhq30/5/
Edit: the AJAX takes a little while to process, so give it a bit of time to load.
UPDATE
I've updated my fiddle to include multiple links (as well as replacing the jquery get with a jquery load, just to speed up the resource retrieval) and, as you can see, the content inside the divs load into the container without a page refresh.
If you implement the solution they way I did, using different hashes for each resource URL, then it should work great. I hope this is what you meant :)
Updated jsfiddle here: http://jsfiddle.net/zrLLhq30/7/
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
