Simple jQuery Table Tabs

Simple jQuery Table Tabs

© 2013 by ManMan89

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style>
table.vmk_table_tabs{
	cursor: default;
	width: 100%;
	border: 0px;
}
table.vmk_table_tabs tr.vmk_table_tabs_menu th{
	width: 1px;
	color: blue;
	cursor: pointer;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	white-space: nowrap;
	border: 1px solid #CCCCCC;
	font-family: verdana;
	font-size: 14px;
}
table.vmk_table_tabs tr.vmk_table_tabs_menu th:hover{color: red;}
table.vmk_table_tabs tr.vmk_table_tabs_menu th.begin{border-right: 0px;}
table.vmk_table_tabs tr.vmk_table_tabs_menu th.end{
	background: none;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	cursor: default;
	width: auto;
}
table.vmk_table_tabs tr.vmk_table_tabs_menu th.active{border-bottom: 0px;}
table.vmk_table_tabs tr.vmk_table_tabs_content td{
	border: 1px solid #CCCCCC;
	border-top: 0px;
	padding: 5px;
	padding-left: 10px;
}
table.vmk_table_tabs tr.vmk_table_tabs_content td div{
	display: none;
}
table.vmk_table_tabs tr.vmk_table_tabs_content td div.active{
	display: block;
}
</style>

<table class="vmk_table_tabs" cellspacing="0">
	<tr class="vmk_table_tabs_menu">
		<th id="vmk_table_tabs_menu_item" class="begin active" vmk_tab_id="vmk_tab_1">TAB 1</th>
		<th id="vmk_table_tabs_menu_item" vmk_tab_id="vmk_tab_2">TAB 2</th>
		<th class="end"></th>
	</tr>
	<tr class="vmk_table_tabs_content">
		<td colspan="3">
			<div id="vmk_tab_1" class="active">
				TAB 1 - CONTENTS
			</div>
			<div id="vmk_tab_2">
				TAB 2 - CONTENTS
			</div>
		</td>
	</tr>
</table>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
	$(document).ready(function(){
		$("table.vmk_table_tabs tr.vmk_table_tabs_menu th#vmk_table_tabs_menu_item").click(function(){
			$("table.vmk_table_tabs tr.vmk_table_tabs_menu").find("th").removeClass("active");
			$(this).addClass("active");
			var vmk_tab_id = $(this).attr("vmk_tab_id");
			if(typeof(vmk_tab_id) != "undefined"){
				$("table.vmk_table_tabs tr.vmk_table_tabs_content").find("td").find("div").css("display","none");
				$("table.vmk_table_tabs tr.vmk_table_tabs_content").find("td").find("div#" + vmk_tab_id).css("display","block");
			}else{
				alert("KHÔNG THỂ LẤY ĐƯỢC ID");
			}
		})
	});
</script>