如何实现jQuery点击动态切换Div内容的优化方案？

这个问题我太懂了——手动写每个元素的隐藏显示逻辑，元素一多简直是维护噩梦！咱们可以用类选择器+自定义数据属性的思路，彻底把代码简化成通用逻辑，不管你是4个还是10个Banner，代码量都不会增加。

第一步：重构HTML结构，用类统一标识元素 #

先把所有Banner和切换链接都加上统一的类，同时给每个链接加一个data-target属性，用来指定它要切换显示的Banner：

<!-- 切换链接 -->
<a href="#" class="banner-switcher" data-target="#banner1">显示Banner1</a>
<a href="#" class="banner-switcher" data-target="#banner2">显示Banner2</a>
<a href="#" class="banner-switcher" data-target="#banner3">显示Banner3</a>
<a href="#" class="banner-switcher" data-target="#banner4">显示Banner4</a>
<!-- 新增Banner的话，直接复制这两行改id就行 -->
<a href="#" class="banner-switcher" data-target="#banner10">显示Banner10</a>

<!-- Banner容器 -->
<div id="banner1" class="banner-item">Banner1的内容</div>
<div id="banner2" class="banner-item" style="display: none;">Banner2的内容</div>
<div id="banner3" class="banner-item" style="display: none;">Banner3的内容</div>
<div id="banner4" class="banner-item" style="display: none;">Banner4的内容</div>
<!-- 新增Banner同理，加类+默认隐藏 -->
<div id="banner10" class="banner-item" style="display: none;">Banner10的内容</div>

第二步：写通用的jQuery逻辑，一次绑定所有链接 #

现在只需要一段代码，就能处理所有链接的点击事件，不用再重复写hide()一堆元素：

// 给所有切换链接绑定点击事件
$('.banner-switcher').click(function(e) {
  // 阻止a标签默认的跳转行为
  e.preventDefault();
  
  // 获取当前点击链接对应的目标Banner选择器
  const targetId = $(this).data('target');
  
  // 1. 隐藏所有Banner
  $('.banner-item').hide();
  // 2. 淡入目标Banner
  $(targetId).fadeIn('slow');
  
  // 可选：给当前激活的链接加高亮样式（提升用户体验）
  $('.banner-switcher').removeClass('active');
  $(this).addClass('active');
});

为什么这个方案更好？ #

• 零冗余：新增Banner时，只需要在HTML里加对应的链接和Banner容器，完全不用修改JS代码
• 易维护：所有逻辑集中在一处，后期要改动画效果（比如把fadeIn改成slideDown），只改一行代码就行
• 灵活性高：data-target可以随便指定Banner的id，不用受链接和Banner的顺序限制

另一种更简洁的方案（适合顺序严格对应的场景） #

如果你的切换链接和Banner是严格按顺序一一对应的，还可以用索引来匹配，连data-target都省了：

<!-- 链接和Banner顺序严格对应 -->
<a href="#" class="banner-switcher">显示Banner1</a>
<a href="#" class="banner-switcher">显示Banner2</a>

<div class="banner-item">Banner1内容</div>
<div class="banner-item" style="display: none;">Banner2内容</div>

$('.banner-switcher').click(function(e) {
  e.preventDefault();
  // 获取当前链接的索引（从0开始）
  const activeIndex = $(this).index();
  
  // 隐藏所有Banner，然后显示对应索引的Banner
  $('.banner-item').hide().eq(activeIndex).fadeIn('slow');
  
  // 激活样式
  $('.banner-switcher').removeClass('active').eq(activeIndex).addClass('active');
});

这个方案更简洁，但缺点是如果链接和Banner的顺序被打乱，匹配就会出错，适合结构固定的场景。

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