怎样用jQuery写出tab栏切换

以下是使用jQuery实现tab栏切换的代码示例：

HTML代码：

<div class="tab">
  <ul class="tab-menu">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">Tab 1 content</div>
    <div class="tab-pane">Tab 2 content</div>
    <div class="tab-pane">Tab 3 content</div>
  </div>
</div>

CSS代码：

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

.tab-menu li {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

.tab-menu li.active {
  font-weight: bold;
}

.tab-pane {
  display: none;
}

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

jQuery代码：

$(document).ready(function() {
  // 默认显示第一个tab
  $('.tab-menu li:first').addClass('active');
  $('.tab-content .tab-pane:first').addClass('active');

  // 点击tab切换
  $('.tab-menu li').click(function() {
    var index = $(this).index();
    $(this).addClass('active').siblings().removeClass('active');
    $('.tab-content .tab-pane').eq(index).addClass('active').siblings().removeClass('active');
  });
});