无需使用jQuery toggle函数，实现点击切换及二次点击恢复初始内容

嘿，我懂你要的效果：不用原生的toggle()方法，自己实现点击同一个链接时在「初始内容」和「对应内容」之间切换，同时多个链接切换时也要正确展示对应内容。咱们一步步来搞定：

第一步：完善HTML结构（补充内容容器） #

首先假设你有对应的内容展示区域，比如一个默认显示初始内容的容器，以及每个tab对应的内容块（默认隐藏）：

<div class="tabs">
  <a class="tab-link" data-tab="1">click me 1</a>
  <a class="tab-link" data-tab="2">click me 2</a>
  <a class="tab-link" data-tab="3">click me 3</a>
</div>
<!-- 内容展示容器 -->
<div id="content-container">这是初始内容</div>
<!-- 每个tab对应的内容（默认隐藏） -->
<div class="tab-content" id="content1" style="display:none;">内容1的具体内容</div>
<div class="tab-content" id="content2" style="display:none;">内容2的具体内容</div>
<div class="tab-content" id="content3" style="display:none;">内容3的具体内容</div>

这里我把原来的内联onclick换成了data-tab属性，用事件委托更优雅，也避免了内联事件的维护麻烦。

第二步：编写jQuery逻辑实现自定义Toggle #

$(document).ready(function() {
  // 保存初始内容，方便后续快速恢复
  const initialContent = $('#content-container').html();
  // 记录每个tab的激活状态：key是tab编号，value是是否处于激活状态
  const tabStates = {1: false, 2: false, 3: false};
  // 跟踪当前激活的tab编号
  let activeTab = null;

  // 给所有tab链接绑定点击事件（事件委托）
  $('.tabs').on('click', '.tab-link', function() {
    const currentTab = parseInt($(this).data('tab'));
    
    // 情况1：点击的是当前已激活的tab → 恢复初始内容，重置状态
    if (tabStates[currentTab]) {
      $('#content-container').html(initialContent);
      tabStates[currentTab] = false;
      activeTab = null;
      // 移除激活样式（如果加了的话）
      $(this).removeClass('active');
      return;
    }

    // 情况2：点击的是未激活的tab（包括其他tab）
    // 先重置所有tab的状态和样式
    if (activeTab !== null) {
      tabStates[activeTab] = false;
      $(`.tab-link[data-tab="${activeTab}"]`).removeClass('active');
    }
    // 显示当前tab对应的内容
    const targetContent = $(`#content${currentTab}`).html();
    $('#content-container').html(targetContent);
    // 更新当前tab的状态和样式
    tabStates[currentTab] = true;
    activeTab = currentTab;
    $(this).addClass('active');
  });
});

关键逻辑解释 #

• 初始内容缓存：页面加载时就把容器的初始HTML存在initialContent里，避免每次恢复时重复获取，提升性能。
• 状态管理：用tabStates对象记录每个tab的激活状态，activeTab跟踪当前激活的tab，确保切换时不会出现状态混乱。
• 点击分支处理：
  • 若点击的是已激活的tab，直接切回初始内容，标记该tab为未激活。
  • 若点击的是新tab，先重置之前激活的tab状态，再替换内容并标记当前tab为激活。

额外优化：给激活tab加样式 #

可以给激活的tab加个视觉提示，让用户更清楚当前选中项：

.tab-link {
  margin-right: 10px;
  cursor: pointer;
}
.tab-link.active {
  color: #2196F3;
  font-weight: bold;
  border-bottom: 2px solid #2196F3;
}

这样就完全实现了你要的效果：不用原生toggle()，点击同一个链接能回到初始内容，切换不同链接也能正确展示对应内容~

内容的提问来源于stack exchange，提问作者PokeLove