HTML CSS Jq实现的简单侧边栏选项卡，实现非常简单，你也可以轻松的在现有的基础上扩充。先看下效果图，再献上代码。

HTML代码

<div id="TabMain">
	<div class="tabItemContainer">
		<li><a class="tabItemCurrent">选项卡1</a></li>
		<li><a>选项卡2</a></li>
		<li><a>选项卡3</a></li>
		<li><a>选项卡4</a></li>
		<li><a>选项卡5</a></li>
	</div>
	<div class="tabBodyContainer">
		<div class="tabBodyItem tabBodyCurrent">
			<p>我是Tab选项卡1的内容</p>
			<p>使用简单，引入css和Jq代码即可</p>
		</div>
		<div class="tabBodyItem">
			<p>我是Tab选项卡2的内容</p>
			<p></p>
		</div>
		<div class="tabBodyItem">
			<p>我是Tab选项卡3的内容</p>
			<p></p>
		</div>
		<div class="tabBodyItem">
			<p>我是Tab选项卡4的内容</p>
			<p></p>
		</div>
		<div class="tabBodyItem">
			<p>我是Tab选项卡5的内容</p>
			<p></p>
		</div>
	</div>
</div>

CSS代码

#TabMain {
	width: 800px;
	height: 500px;
	margin: 0 auto;
	margin-top: 100px;
}
.tabItemContainer {
	width: 100px;
	height: 500px;
	float: left;
}
.tabBodyContainer {
	width: 677px;
	height: 500px;
	float: left;
	background-color: #fff;
	border: 1px solid #ccc;
	-webkit-border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
	margin-left: 1px;
}
.tabItemContainer>li {
	list-style: none;
	text-align: center;
}
.tabItemContainer>li>a {
	float: left;
	width: 100%;
	padding: 30px 0 30px 0;
	font: 16px "微软雅黑", Arial, Helvetica, sans-serif;
	color: #808080;
	cursor: pointer;
	text-decoration: none;
	border:1px solid transparent;
}
.tabItemCurrent {
	background-color: #fff;
	border: 1px solid #ccc !important;
	border-right: 1px solid #fff !important;
	position: relative;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}
.tabItemContainer>li>a:hover {
	color: #333;
}
.tabBodyItem {
	position: absolute;
	width: 677px;
	height: 500px;
	display: none;
}
.tabBodyItem>p {
	font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
	text-align: center;
	margin-top: 30px;
}
.tabBodyItem>p>a {
	text-decoration: none;
	color: #0F3;
}
.tabBodyCurrent{
	display:block;
}

Jq代码

var SidebarTabHandler={
	Init:function(){
		$(".tabItemContainer>li").click(function(){
			$(".tabItemContainer>li>a").removeClass("tabItemCurrent");
			$(".tabBodyItem").removeClass("tabBodyCurrent");
			$(this).find("a").addClass("tabItemCurrent");
			$($(".tabBodyItem")[$(this).index()]).addClass("tabBodyCurrent");
		});
	}
}