balanza/simpliest tab-switcher plugin ever

## simpliest tab-switcher plugin ever
<!DOCTYPE HTML>

<html lang="it">

<head>
	<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script>
		(function($){


			$.fn.tabSwitch = function(){

				var $labels_container = $(this);
				var $labels = $labels_container.find("li");
				var $tabs_container = $("#" + $labels_container.attr("rel"));
				var $tabs = $tabs_container.find("li");

				//if no selection is made, select the first element
				var $selected_label = $labels.filter(".selected");
				if($selected_label){
					//primo
					showTab(0);
				}

				//switch tab
				function showTab(i){
					$tabs.removeClass("selected");
					$($tabs[i]).addClass("selected");
					$labels.removeClass("selected");
					$($labels[i]).addClass("selected");
				}


				//events
				$labels.live("click", function(){
					showTab($labels.index(this));
				});

				$labels.live("hover", function(){
					showTab($labels.index(this));
				});


			}


		})(jQuery);


		$(function(){

			$("#tabLabel").tabSwitch();

		});
	</script>

	<style>
		li.selected{
			color: red;
		}
	</style>

</head>
<body>

	<ul id="tabContent" class="tab-content">
		<li>content 1</li>
		<li>content 2</li>
		<li>content 3</li>
		<li>content 4</li>
	</ul>


	<ul id="tabLabel" rel="tabContent" class="tab-label">
		<li>label 1</li>
		<li>label 2</li>
		<li class="selected">label 3</li>
		<li>label 4</li>
	</ul>

</body>

</html>
	<!DOCTYPE HTML>

	<html lang="it">

	<head>
	<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script>
	(function($){


	$.fn.tabSwitch = function(){

	var $labels_container = $(this);
	var $labels = $labels_container.find("li");
	var $tabs_container = $("#" + $labels_container.attr("rel"));
	var $tabs = $tabs_container.find("li");

	//if no selection is made, select the first element
	var $selected_label = $labels.filter(".selected");
	if($selected_label){
	//primo
	showTab(0);
	}

	//switch tab
	function showTab(i){
	$tabs.removeClass("selected");
	$($tabs[i]).addClass("selected");
	$labels.removeClass("selected");
	$($labels[i]).addClass("selected");
	}



	//events
	$labels.live("click", function(){
	showTab($labels.index(this));
	});

	$labels.live("hover", function(){
	showTab($labels.index(this));
	});



	}


	})(jQuery);


	$(function(){

	$("#tabLabel").tabSwitch();

	});
	</script>

	<style>
	li.selected{
	color: red;
	}
	</style>

	</head>
	<body>

	<ul id="tabContent" class="tab-content">
	<li>content 1</li>
	<li>content 2</li>
	<li>content 3</li>
	<li>content 4</li>
	</ul>


	<ul id="tabLabel" rel="tabContent" class="tab-label">
	<li>label 1</li>
	<li>label 2</li>
	<li class="selected">label 3</li>
	<li>label 4</li>
	</ul>

	</body>

	</html>