如何使用JQuery显示自定义导航选项卡的内容？

<ul class="nav-tabs">
  <li data-tab="tab1">Tab 1</li>
  <li data-tab="tab2">Tab 2</li>
  <li data-tab="tab3">Tab 3</li>
</ul>

<div class="tab-content">
  <div class="tab" id="tab1">Content 1</div>
  <div class="tab" id="tab2">Content 2</div>
  <div class="tab" id="tab3">Content 3</div>
</div>

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

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

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

.tab {
  display: none;
}

$(document).ready(function() {
  $('.nav-tabs li').click(function() {
    var tabId = $(this).data('tab');
    
    // 显示选中的内容区域，隐藏其他内容区域
    $('.tab-content .tab').hide();
    $('#' + tabId).show();
  });
});