停靠在浏览器中的Tab DIVs。单击时使用jquery滑入和滑出屏幕

<div class="tab-container">
  <ul class="tabs">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="content">
    <div class="tab-content active">
      Content 1
    </div>
    <div class="tab-content">
      Content 2
    </div>
    <div class="tab-content">
      Content 3
    </div>
  </div>
</div>

.tab-container {
  width: 100%;
  height: 100%;
}

.tabs {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabs li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tabs li.active {
  background-color: #fff;
}

.content {
  padding: 10px;
  border: 1px solid #ccc;
  height: 200px;
  overflow: hidden;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

$(document).ready(function() {
  $('.tabs li').click(function() {
    var index = $(this).index();
    $('.tabs li').removeClass('active');
    $(this).addClass('active');
    $('.tab-content').removeClass('active');
    $('.tab-content').eq(index).addClass('active');
  });
});