先给大家看一下效果图：

 html+jQuery代码：

<div class="tab">
	<ul class="tab-list">
		<li>
			<a class="current" href="">tab1选项卡</a>
		</li>
		<li>
			<a href="">tab2选项卡</a>
		</li>
	</ul>
	<div class="tab-content">
		<div class="tab-group tab-group-show">
			tab1选项卡内容
		</div>
		<div class="tab-group">
			tab2选项卡内容
		</div>
	</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    $(document).ready(function(){
      $('.tab-list a').each(function(i){
        $(this).click(function(){
          $('.tab-list a').removeClass('current').eq(i).addClass('current');
          $('.tab-group').hide().eq(i).show();
          return false;
        })
      })
    })
</script>

CSS代码：

 ul {
 	margin: 0;
 	padding: 0;
 }
 
 li {
 	list-style: none;
 }
 
 a {
 	text-decoration: none;
 	color: #333;
 }
 
 .tab {
 	width: 100%;
 }
 
 .tab-list {
 	display: flex;
	border-bottom: 2px solid #ccc;
 }
 
 .tab-list li {
 	flex:1;
 	text-align: center;
	font-size: 1.3rem;
	height: 3rem;
 	line-height: 3rem;
 }
 
 .tab-list .current {
 	color: #ff5400; 	
 	font-weight: bold;
 	border-bottom: 2px solid #ff5400;
 	display: block;
 }
 
 .tab-group {
 	padding: 40px 20px;
 	display: none;
 }
 
 .tab-group-show {
 	display: block;
 }

注意：css部分代码需要根据需求自己稍微调整，我上面使用的是自适应的rem单位。