如何使用jQuery实现点击元素替换展示对应文本内容

推荐两种兼容性高、逻辑不易出错的实现方式，完全可以覆盖你的需求：

方案1：内容映射+动态替换 #

适合内容结构简单、纯文本/简单富文本的场景，不需要提前渲染所有内容DOM：

1. HTML结构示例

<!-- 左侧点击列表 -->
<ul class="side-menu">
  <li class="menu-item" data-content-key="item1">菜单选项1</li>
  <li class="menu-item" data-content-key="item2">菜单选项2</li>
  <li class="menu-item" data-content-key="item3">菜单选项3</li>
</ul>
<!-- 右侧内容展示区 -->
<div class="content-area"></div>

2. jQuery逻辑

// 提前定义所有菜单对应的内容
const contentConfig = {
  item1: "点击菜单1展示的文本内容",
  item2: "点击菜单2展示的不同文本，支持富文本内容",
  item3: "点击菜单3展示的专属文本"
}

$('.menu-item').click(function() {
  // 获取当前点击项对应的内容key
  const key = $(this).data('content-key')
  // 直接覆盖展示区内容，自动替换之前的内容，不需要额外判断逻辑
  $('.content-area').text(contentConfig[key])
  // 如果内容包含HTML标签，替换为html方法：$('.content-area').html(contentConfig[key])
})

方案2：预渲染内容块+显隐控制 #

适合内容结构复杂、包含多元素/交互的场景，提前把所有内容渲染到页面上，仅控制显隐：

1. HTML结构示例

<!-- 左侧点击列表 -->
<ul class="side-menu">
  <li class="menu-item" data-target-id="block1">菜单选项1</li>
  <li class="menu-item" data-target-id="block2">菜单选项2</li>
  <li class="menu-item" data-target-id="block3">菜单选项3</li>
</ul>
<!-- 右侧内容展示区 -->
<div class="content-area">
  <div class="content-block" id="block1">菜单1对应的复杂内容，可包含图片、表单等任意元素</div>
  <div class="content-block" id="block2">菜单2对应的复杂内容</div>
  <div class="content-block" id="block3">菜单3对应的复杂内容</div>
</div>

2. CSS基础样式

/* 默认隐藏所有内容块 */
.content-block {
  display: none;
}
/* 可选：默认展示第一个内容块 */
.content-block:first-child {
  display: block;
}

3. jQuery逻辑

$('.menu-item').click(function() {
  const targetId = $(this).data('target-id')
  // 先隐藏所有内容块，清除之前的展示内容
  $('.content-block').hide()
  // 仅展示当前点击对应的内容块
  $('#' + targetId).show()
})

注意：统一用data-*自定义属性存储点击项和内容的关联关系，不要通过下标、文本内容匹配来做关联，后续修改列表文本/顺序的时候不会影响逻辑稳定性。

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