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>