Jquery 1.11选项卡不重新加载内容

<ul class="tabs">
  <li class="active">Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

<div class="tab-content">
  <div class="tab-pane active">Content 1</div>
  <div class="tab-pane">Content 2</div>
  <div class="tab-pane">Content 3</div>
</div>

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

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

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

.tab-content {
  padding: 10px;
  border: 1px solid #ccc;
}

$(document).ready(function() {
  $('.tabs li').click(function() {
    // 切换选项卡的激活状态
    $('.tabs li').removeClass('active');
    $(this).addClass('active');
    
    // 切换内容区域的显示
    var index = $(this).index();
    $('.tab-content .tab-pane').removeClass('active');
    $('.tab-content .tab-pane').eq(index).addClass('active');
  });
});