简单的jquery tab选项卡

jquery:

$(function(){
	$(".m_tab li").click(function(){
		$(this).addClass("m_hover").siblings().removeClass("m_hover");
		var index=$(".m_tab li").index(this);
		$(".tab_box").eq(index).show().siblings().hide();
		})	
	})

css：

.m_tab {
	overflow: hidden;
	zoom: 1;
}
.m_tab li {
	float: left;
	margin-left: 20px;
	width: 114px;
	display: inline-block;
}
.m_tab li a {
	display: inline-block;
	height: 36px;
	line-height: 36px;
	width: 110px;
	border: 2px solid #eee;
	border-bottom: none;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	background: #f4f4f4;
}
.m_tab li.m_hover {
	width: 114px;
	margin-left: 20px;
	display: inline-block;
}
.m_tab li.m_hover a {
	border-bottom: 2px solid #fff;
	position: relative;
	background: #fff;
}
.m_pay {
	border: 2px solid #eeeeee;
	height: 500px;
	margin-bottom: 20px;
	margin-top: -2px;
}
.tab_box {
	display: none;
}
.dis {
	display: block;
}

html：

<ul class="m_tab">
  <li class="m_hover"><a href="javascript:void(0)" >tab1</a> </li>
  <li ><a href="javascript:void(0)">tab2</a></li>
</ul>
<div class="m_pay">
  <div class="m_box">
    <div class="tab_box dis">内容1</div>
    <div class="tab_box">内容2</div>
  </div>
</div>