使用jQuery和CSS动态管理同类名元素的选中状态样式

/* 默认链接样式 */
a {
  display: block;
  font-weight: bold;
  color: green;
  margin-bottom: 10px;
  text-decoration: none;
}

/* 元素获得焦点时的样式 */
.focusme:focus {
  color: blue; /* 焦点时的颜色 */
  outline: 2px solid blue; /* 增加视觉提示 */
}

<a class='focusme' href="#">焦点链接 A</a>
<a class='focusme' href="#">焦点链接 B</a>
<a class='focusme' href="#">焦点链接 C</a>

/* 默认元素样式 */
.carousel-item {
  display: inline-block;
  padding: 10px 15px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 选中状态的样式 */
.carousel-item.selected {
  border-color: #007bff;
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}

/* 鼠标悬停效果 */
.carousel-item:hover {
  background-color: #e0e0e0;
}
.carousel-item.selected:hover {
  background-color: #0069d9;
}

// 确保DOM加载完成后执行
jQuery(function($) {
  // 监听所有具有 'carousel-item' 类的元素的点击事件
  $('.carousel-item').on('click', function() {
    // 步骤1: 移除所有 'carousel-item' 元素上的 'selected' 类
    // 这样可以确保每次只有一个元素处于选中状态
    $('.carousel-item').removeClass('selected');

    // 步骤2: 为当前被点击的元素添加 'selected' 类
    $(this).addClass('selected');

    // 示例：如果还需要执行其他操作，比如显示关联内容
    // var showme = $(this).attr('data-showme');
    // if (showme) {
    //   $('.all-content').hide();
    //   $('#' + showme).show();
    // }
  });

  // 如果需要页面加载时有一个默认选中项
  // 例如，让第一个项目默认选中
  // $('.carousel-item:first').addClass('selected');
});

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="carousel-container">
  <div class="carousel-item" data-showme="content1">项目一</div>
  <div class="carousel-item" data-showme="content2">项目二</div>
  <div class="carousel-item" data-showme="content3">项目三</div>
</div>

<!-- 关联内容区域 (如果需要，可与 data-showme 属性结合) -->
<div class="all-content" id="content1" style="display: none;">
  <h2>项目一的内容</h2>
  <p>这是项目一的详细信息。</p>
</div>
<div class="all-content" id="content2" style="display: none;">
  <h2>项目二的内容</h2>
  <p>这是项目二的详细信息。</p>
</div>
<div class="all-content" id="content3" style="display: none;">
  <h2>项目三的内容</h2>
  <p>这是项目三的详细信息。</p>
</div>