jquery+cssでタブをそれっぽく表示する

program

元々jquery.ui.jsを使うまでもない場合のために考えてたのだが、思った以上に長くなってしまった。css部分が長い……。

<html>
<head>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script>
$.fn.simpleTabs = function () {
	var self = this;

	$(">ul>li"    , self).css("display", "inline");
	$(">div"      , self).hide();
	$(">div:first", self).show();

	$(">ul>li>a"  , self).click(function(e){
		$(">ul>li>a", self).removeClass("ActiveTab");
		$(this).addClass("ActiveTab").blur();
		$(">div", self).hide();
		$(">div" + $(this).attr("href"), self).show();
		e.preventDefault();
	});
};

$(function(){
	$("#tabs").simpleTabs();
});
</script>
<style>
.TabPanel ul, .TabPanel li {
	margin: 0;
	padding: 0;
}
.TabPanel ul li {
	display: inline;
}
.TabPanel ul li a {
	border: solid 1px lightgray;
	background-color: white;
	text-decoration: none;

	-moz-border-radius-topleft : 5px;
	-moz-border-radius-topright: 5px;
}
.TabPanel ul li a.ActiveTab {
	border-bottom-color: white;
}
.TabPanel ul {
	background-color: lightgray;
	padding: 1px 0;
}
.TabPanel ul, x:-moz-read-only  {
	padding: 0;      /* css hack Firefox */
	_padding: 1px 0; /* css hack IE */
}
.TabPanel div {
	border: solid 1px lightgray;
	border-width: 0 1px 1px 1px;
}
</style>
<body>
<div id="tabs" class="TabPanel">
	<ul>
		<li><a href="#a" class="ActiveTab">test1</a>
		<li><a href="#b">test2</a>
		<li><a href="#c">test3</a>
	</ul>
	<div id="a" style="border: solid 1px lightgray; border-width: 0 1px 1px 1px;">
	aaaa<br>aaaa<br>aaaa<br>aaaa<br>aaaa<br>
	</div>
	<div id="b" style="border: solid 1px lightgray; border-width: 0 1px 1px 1px;">
	bbbb<br>bbbb<br>bbbb<br>bbbb<br>bbbb<br>
	</div>
	<div id="c" style="border: solid 1px lightgray; border-width: 0 1px 1px 1px;">
	cccc<br>cccc<br>cccc<br>cccc<br>cccc<br>
	</div>
</div>