Development of JQ for Tabs

Step 1 - get the tabs themselves working.
Setp 2 - show the correct tabpage in response to the click.
Step 3 - match the background color of the tab to the background
   color of the tabpage that will be displayed.

New jQuery methods used here: not()  find()

Step 1 development
1. Make sure external files are loaded (WebConsole)
2. Make sure the event is bound to correct handler 
3. Ignore tab already selected 
4. Remove 'selected' class from all tabs
5. Add 'selected' to tab we just clicked

*************************************************

Use WebDeveloper/WebConsole to check that the browser 
correctly loads this external file.

<script src=
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js >
</script>

<!-- Page specific JS  -->
<script>
$(document).ready(function() {
	console.log('page loaded');
});
</script>




*******************************************************

<script src=
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js >
</script>

<!-- Page specific JS  -->
<script>
$(document).ready(function() {
	console.log('page loaded');
	$('ul#TabExample a').click( function () {
		console.log('click on tab');
	});
});
</script>

Test by clicking on each of the tabs and monitoring the
FB console window.



*********************************************************
If the user clicks on the tab already selected, there is
nothing we have to do.

$(document).ready(function() {
	console.log('page loaded');

	$('ul#TabExample a').click( function () {
		console.log('click on tab');
		if( ! $(this).hasClass('selected')) {
			console.log('new tab selected');
		}
	});
});

Ooops, first mistake.  What is wrong with the selector
'ul.tabs-nav a'?  Look at the HTML of the document to find
the mismatch.




*******************************************************

OK. Much better to click on the List Item rather than just
the anchor embedded within it.

Next, remember the tab we just clicked on (tabChosen) and
un-select all tabs.  This is redundant - only 1 tab
is has class 'selected', but this is the simplest 
and fastest way to write the code

$(document).ready(function() {
	console.log('page loaded');
	$('ul#TabExample li').click( function () {
		console.log('click on tab');
		if( ! $(this).hasClass('selected')) {
			console.log('new tab selected');
/* new code */
			var tabChosen = $(this);
			$('ul#TabExample li').removeClass('selected');
			$(this).addClass('selected');
		}
	});
});

*******************************************************
Step 2 - show the correct tabpage

First, we hide all the tabpages

	$('ul#TabExample li').click( function () {
		console.log('click on tab');
		if( ! $(this).hasClass('selected')) {
			console.log('new tab selected');
			var tabChosen = $(this);
			
			/* handle tabs */
			$('ul#TabExample li').removeClass('selected');
			$(this).addClass('selected');
/*  new code */			
			/* handle tabpage */
			$('div.tabpage').addClass('paneHide');
			
		}
	});




*******************************************************

Next, make the selected page visible.

$(document).ready(function() {
	console.log('page loaded');
	$('ul#TabExample li').click( function () {
		console.log('click on tab');
		if( ! $(this).hasClass('selected')) {
			console.log('new tab selected');
			var tabChosen = $(this);
			var anchorChosen = $(this).find('a');
			
			/* handle tabs */
			$('ul#TabExample li').removeClass('selected');
			tabChosen.addClass('selected');
			
			/* handle tabpage */
			$('div.tabpage').addClass('paneHide');
/* new code */
/* Note that rather than just a selector literal, we create a
   selector string using the href of the anchor */

			console.log(anchorChosen.attr('href'));
			console.log( 'div.tabpage' + anchorChosen.attr('href'));
			$('div.tabpage' + anchorChosen.attr('href'))
				.removeClass('paneHide');


Step 3 - adjust the background color of the tab to match the page
			
			/* set background-color of tab to match tabpage */
			var tabChosenBackgroundColor = $('div.tabpage' + anchorChosen.attr('href'))
				.css('background-color');
			tabChosen.css('background-color', tabChosenBackgroundColor);
			$('ul#TabExample > li')
				.not('.selected')
				.css('background-color','yellowgreen');
		}
	});
});


*******************************************************

Next, we refactor by creating a new function, displayTab

$('ul#TabExample li').click( function () {
	console.log('click on tab');
	displayTab($(this));
});
	
    function displayTab(tab) {
		if( ! tab.hasClass('selected')) {
			console.log('new tab selected');
			var tabChosen = tab;
			var anchorChosen = tab.find('a');
			
			/* handle tabs */
			$('ul#TabExample li').removeClass('selected');
			tab.addClass('selected');
			
			/* handle tabpage */
			$('div.tabpage').addClass('paneHide');
			console.log(anchorChosen.attr('href'));
			console.log( 'div.tabpage' + anchorChosen.attr('href'));
			$('div.tabpage' + anchorChosen.attr('href'))
				.removeClass('paneHide');
			
			/* set background-color of tab to match tabpage */
			var tabChosenBackgroundColor = $('div.tabpage' + anchorChosen
				.attr('href'))
				.css('background-color');
			tabChosen.css('background-color',tabChosenBackgroundColor);
			$('ul#TabExample > li')
				.not('.selected')
				.css('background-color','yellowgreen');
		}
		
	}