jQuery .load() and switch() problem
I have three anchor tag links in my html with id's "switcher", "switcher-b", "switcher-c", when anchor tag "switcher" is clicked I would like to load content from a html page on my server "content.html", anchor "switcher-b" will load "content-b.html", and "switcher-c" will load "content-c.html". I also have an anchor tag id "default" when clicked will reset / unload the html pages.
I figured a switch statement would be the best way to achieve my task but it is not working... I'm not proficient with jQuery/ JavaScript but I want to learn so if any JavaScript / jQuery developers with intermediate or advance knowledge can identify what I am doing wrong in my jQuery syntax and suggest a solution with explanation I truly will appreciate it.
Thank you for viewing my posting and your help.
jQuery:
Code:
$(function(){
$('#switcher a').click(function(event){
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass('bodyClass');
switch(bodyClass){
case .switcher:
$('#result').load('content.html #content');
break;
case .switcher-b:
$('#result').load('content-b.html #content');
break;
case .switcher-c:
$('#result').load('content-c.html #content');
break;
default:
$('#result').unload();
}
return false;
});
});
HTML:
Code:
<head>
<title>AJAX Calls with jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
</head>
<body>
<h1>AJAX Calls with jQuery load()</h1>
<div id="switcher">
<p><a id="switcher" href="#">Click here to fetch HTML content</a></p>
<p><a id="switcher-b" href="#">Click here to fetch HTML content</a></p>
<p><a id="switcher-c" href="#">Click here to fetch HTML content</a></p>
<p><a id="default" href="#">Reset</a></p>
</div>
<div id="result"></div>
