html代码部分

<div class="tabs">
  <div class="tab" data-target="#tab1">Tab 1</div>
  <div class="tab" data-target="#tab2">Tab 2</div>
  <div class="tab" data-target="#tab3">Tab 3</div>
</div>
<div class="tab-content" id="tab1">
  Content for tab 1
</div>
<div class="tab-content" id="tab2" style="display:none;">
  Content for tab 2
</div>
<div class="tab-content" id="tab3" style="display:none;">
  Content for tab 3
</div>

jquery代码部分

$(document).ready(function(){
  $('.tab').click(function(){
    // 移除所有tab-content的活动状态
    $('.tab-content').hide();
 
    // 找到点击的tab对应的内容区域，并显示
    $( $(this).data('target') ).show();
  });
 
  // 可选：默认显示第一个tab的内容
  $('.tab:first').click();
});