如何用jQuery实现菜单激活对应Django模板的显示与隐藏？

咱们核心思路很简单：给菜单项和对应的内容区块建立一一对应的关联标识，然后在菜单点击时，根据这个标识找到对应的内容显示，同时隐藏其他内容。下面一步步来修改你的代码，每一步我都给你讲清楚为什么这么做。

1. 先修改HTML结构，添加关联标识 #

首先要给菜单项和内容区块做个“配对标记”，这样JS才能知道点哪个菜单对应显示哪块内容：

修改后的菜单代码 #

<div class="ui container">
  <div class="ui large secondary red pointing menu">
    <a class="toc item">
      <i class="sidebar icon"></i>
    </a>
    <!-- 给每个菜单项加data-target属性，值对应下面内容div的ID -->
    <a class="active item" data-target="item-1">item-1</a>
    <a class="item" data-target="item-2">item-2</a>
    <a class="item" data-target="item-3">item-3</a>
    <div class="right menu item">
      <div class="ui simple dropdown">
        More
        <i class="dropdown icon"></i>
        <div class="ui menu">
          <a class="item"><i class="globe icon"></i> Choose Language</a>
          <a class="item"><i class="settings icon"></i> Log Out</a>
        </div>
      </div>
    </div>
  </div>
</div>

修改后的内容区块代码 #

<!-- 给每个包含模板的div加统一类名+对应ID，初始只显示默认激活的item-1 -->
<div class="content-panel" id="item-1">{% include "testapp/item-1.html" %}</div>
<!-- 初始隐藏其他内容 -->
<div class="content-panel" id="item-2" style="display: none;">{% include "testapp/item-2.html" %}</div>
<div class="content-panel" id="item-3" style="display: none;">{% include "testapp/item-3.html" %}</div>

这里的细节解释：

• data-target是HTML5的自定义数据属性，专门用来存元素的额外关联信息，这里就用来绑定菜单项和内容区块的ID。
• 给所有内容区块加content-panel统一类名，方便用jQuery一次性选中所有内容，不用重复写选择器。
• 初始状态下，只有默认激活的item-1对应的内容显示，其他用display: none隐藏，符合页面加载的初始逻辑。

2. 修改jQuery逻辑，添加内容切换功能 #

现在把菜单点击的逻辑扩展一下，除了切换active类，还要控制内容的显示隐藏：

<!-- top menu color activation -->
<script>
menu = {};

// ready event
menu.ready = function() {
  // selector cache：缓存DOM元素，提升性能（不用每次点击都重新找元素）
  var $menuItem = $('.menu a.item, .menu .item, .menu .link.item'),
      // 新增：缓存所有内容区块
      $contentPanels = $('.content-panel'),
      // alias
      handler = {
        activate: function() {
          // 保留你原来的菜单active类切换逻辑
          $(this)
            .addClass('active')
            .closest('.ui.menu')
            .find('.item')
            .not($(this))
            .removeClass('active');

          // 新增：内容切换核心逻辑
          // 1. 获取当前点击菜单项绑定的目标内容ID
          var targetId = $(this).data('target');
          // 2. 先隐藏所有内容区块
          $contentPanels.hide();
          // 3. 再显示对应的目标内容区块
          $('#' + targetId).show();
        }
      };

  $menuItem.on('click', handler.activate);
};

// attach ready event
$(document).ready(menu.ready);
</script>

新增逻辑的细节解释：

• var $contentPanels = $('.content-panel')：把所有内容区块提前存在变量里，每次点击不用重新遍历DOM，页面响应更快。
• var targetId = $(this).data('target')：$(this)就是当前被点击的菜单项，.data('target')会读取我们之前加的data-target属性值（比如点item-2时，这个值就是"item-2"）。
• $contentPanels.hide()：调用jQuery的hide()方法，一次性把所有内容都藏起来。
• $('#' + targetId).show()：通过ID选择器找到对应的内容区块，调用show()方法显示它，完美匹配你点击的菜单项。

可选优化：用CSS控制显示隐藏（更语义化） #

如果你不想在HTML里写style="display: none;"，可以把样式逻辑交给CSS，JS只负责切换类名，维护起来更方便：

先加一段CSS #

.content-panel {
  display: none; /* 默认所有内容都隐藏 */
}
.content-panel.active {
  display: block; /* 只有带active类的内容显示 */
}

修改HTML内容区块 #

<div class="content-panel active" id="item-1">{% include "testapp/item-1.html" %}</div>
<div class="content-panel" id="item-2">{% include "testapp/item-2.html" %}</div>
<div class="content-panel" id="item-3">{% include "testapp/item-3.html" %}</div>

修改JS里的内容切换逻辑 #

把原来的hide()和show()换成添加/移除active类：

// 替换原来的内容切换代码
$contentPanels.removeClass('active');
$('#' + targetId).addClass('active');

这种方式把样式和逻辑分开，符合前端最佳实践，以后要改显示样式（比如改成淡入淡出），直接改CSS就行，不用动JS。

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