jquery选项卡切换效果

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Content for Tab 1 goes here.</p>
    </div>
    <div id="tab2" class="tab">
      <p>Content for Tab 2 goes here.</p>
    </div>
    <div id="tab3" class="tab">
      <p>Content for Tab 3 goes here.</p>
    </div>
  </div>
</div>

.tabs {
  width: 100%;
}

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

.tab-links li {
  display: inline-block;
}

.tab-links a {
  display: block;
  padding: 10px;
  background-color: #f1f1f1;
  color: #333;
  text-decoration: none;
}

.tab-links .active a {
  background-color: #ddd;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ddd;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

$(document).ready(function() {
  $('.tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $('.tabs ' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    $(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});