如何用jQuery获取同className元素数组并设置轮播选中项标题样式？

步骤1：统一HTML结构与类名 #

先给所有轮播项标题加上同一个类（比如slide-title），同时用data-target属性关联对应的内容容器ID，避免重复写多个点击事件：

<!-- 轮播标题示例 -->
<div class="slide-title" data-target="smartedgemain">标题1</div>
<div class="slide-title" data-target="content2">标题2</div>
<div class="slide-title" data-target="content3">标题3</div>

<!-- 内容容器示例 -->
<div class="all-content" id="smartedgemain">内容1</div>
<div class="all-content" id="content2">内容2</div>
<div class="all-content" id="content3">内容3</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

步骤2：添加CSS样式 #

定义选中和未选中的标题样式：

/* 未选中的标题样式 */
.slide-title {
  color: #ffffff;
  cursor: pointer;
  padding: 8px 16px; /* 可选：提升点击区域体验 */
}

/* 选中的标题样式 */
.slide-title.active {
  color: #2563eb; /* 替换成你需要的高亮颜色 */
}

步骤3：修改jQuery逻辑 #

用类选择器批量绑定点击事件，同时处理样式切换和内容显示：

jQuery(function($) {
  // 页面初始化：默认选中第一个标题并显示对应内容
  $('.slide-title').first().addClass('active');
  $('.all-content').hide();
  $('#' + $('.slide-title').first().data('target')).show();

  // 绑定所有标题的点击事件
  $('.slide-title').on('click', function() {
    // 移除所有标题的选中样式
    $('.slide-title').removeClass('active');
    // 给当前点击的标题添加选中样式
    $(this).addClass('active');
    // 获取当前标题对应的内容ID
    var targetContent = $(this).data('target');
    // 切换显示对应内容
    $('.all-content').hide();
    $('#' + targetContent).show();
  });
})

关键说明 #

• $('.slide-title')直接就能获取所有同className的元素，jQuery会自动将其包装为类数组对象，无需手动用forEach遍历，调用jQuery方法会自动批量操作所有元素。
• data-target属性用来关联标题和对应内容，避免写多个重复的ID绑定逻辑，后续新增轮播项只需复制结构修改属性值即可，更易维护。

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