以下是一个示例代码，展示了如何使用jQuery实现选项卡的切换功能：

HTML代码：

  

    
Tab 1
    
Tab 2
    
Tab 3
  
  

    
Content for Tab 1
    
Content for Tab 2
    
Content for Tab 3
  

CSS代码：

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

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

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

.tabs .tab-pane {
  display: none;
}

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

JavaScript代码：

$(document).ready(function() {
  // 默认显示第一个选项卡
  $('.tab-nav li:first').addClass('active');
  $('.tab-pane:first').addClass('active').show();
  
  // 点击选项卡切换内容
  $('.tab-nav li').click(function() {
    // 移除所有选项卡的激活状态
    $('.tab-nav li').removeClass('active');
    $('.tab-pane').removeClass('active').hide();
    
    // 设置点击的选项卡为激活状态
    $(this).addClass('active');
    
    // 显示对应的内容
    var activeTab = $(this).index();
    $('.tab-pane:eq(' + activeTab + ')').addClass('active').show();
  });
});

以上代码中，通过点击选项卡来切换内容。首先，我们给第一个选项卡添加了active类，并将对应的内容显示出来。然后，通过点击事件，移除所有选项卡的激活状态，并隐藏所有内容，再将点击的选项卡设置为激活状态，并显示对应的内容。