如何用JS/jQuery/CSS调整水平元素顺序？使active类元素始终居右

当然可以搞定这个需求！下面我给你几种不同的实现方案，分别用到原生JS、jQuery以及CSS Flex的特性，你可以根据自己的技术栈来选：

这个方案通过直接调整DOM元素的位置，让激活的模块始终排在容器最右侧，逻辑直观易懂：

HTML结构 #

<div class="module-container">
  <div class="module">模块1</div>
  <div class="module">模块2</div>
  <div class="module">模块3</div>
</div>

CSS样式 #

.module-container {
  display: flex;
  gap: 12px; /* 模块间的间距 */
  margin: 20px;
}
.module {
  padding: 10px 24px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.module.active {
  background-color: #2196F3;
  color: white;
  border-color: #2196F3;
}

原生JS逻辑 #

// 获取所有模块和容器元素
const modules = document.querySelectorAll('.module');
const container = document.querySelector('.module-container');

// 给每个模块绑定点击事件
modules.forEach(module => {
  module.addEventListener('click', function() {
    // 先移除所有模块的active类
    modules.forEach(mod => mod.classList.remove('active'));
    // 给当前点击的模块添加active类
    this.classList.add('active');
    // 将当前模块移到容器的最后位置（也就是右侧）
    container.appendChild(this);
  });
});

如果你的项目已经引入了jQuery，用它来实现会更简洁：

jQuery代码 #

$(function() {
  $('.module').on('click', function() {
    // 移除所有模块的active类
    $('.module').removeClass('active');
    // 给当前点击的模块添加active类，并移到容器末尾
    $(this).addClass('active').appendTo('.module-container');
  });
});

（HTML和CSS和方案一完全一致，直接复用即可）

如果你不想改变DOM结构的顺序，可以利用Flex布局的order属性来调整显示位置，激活的模块设置更高的order值，就能自动排到右侧：

修改后的JS逻辑（原生版） #

const modules = document.querySelectorAll('.module');

modules.forEach(module => {
  module.addEventListener('click', function() {
    // 重置所有模块的order和active状态
    modules.forEach(mod => {
      mod.classList.remove('active');
      mod.style.order = '0';
    });
    // 给当前模块添加active类，并设置更高的order值
    this.classList.add('active');
    this.style.order = '1'; // 比其他模块的0高，所以排到最后
  });
});

（CSS和HTML结构和方案一一致，无需额外修改）

补充说明 #

• 方案一和方案二通过移动DOM元素实现，视觉效果直接，适合大多数场景；
• 方案三通过修改样式属性调整位置，不会改变DOM的原始顺序，适合需要保留DOM结构的特殊场景。

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