无法使jQuery显示选项卡式导航内容

<ul class="nav-tabs">
  <li id="tab1">选项卡1</li>
  <li id="tab2">选项卡2</li>
  <li id="tab3">选项卡3</li>
</ul>

.nav-tabs li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

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

.nav-tabs li:hover {
  background-color: #f5f5f5;
}

$(document).ready(function() {
  // 隐藏所有选项卡内容
  $(".tab-content").hide();

  // 默认显示第一个选项卡内容
  $("#tab1-content").show();

  // 为每个菜单项添加点击事件
  $(".nav-tabs li").click(function() {
    // 获取当前点击的菜单项的ID
    var tabId = $(this).attr("id");

    // 隐藏所有选项卡内容
    $(".tab-content").hide();

    // 显示对应的选项卡内容
    $("#" + tabId + "-content").show();

    // 添加/移除选中状态的样式
    $(".nav-tabs li").removeClass("active");
    $(this).addClass("active");
  });
});

<div id="tab1-content" class="tab-content">
  选项卡1的内容
</div>
<div id="tab2-content" class="tab-content">
  选项卡2的内容
</div>
<div id="tab3-content" class="tab-content">
  选项卡3的内容
</div>