如何将活动类列表设置为有序列表中的第一个答案

【问题标题】：How to set the Active class lists to be first in ordered lists如何将活动类列表设置为有序列表中的第一个
【发布时间】：2023-02-07 23:34:43
【问题描述】：

我有很多列表，其中很少有列表积极的班级。我想要这样的外观：具有活动类的列表应按顺序首先列出，其余为没有活动类。

在下面的 sn-p 中，我有列表A、B、C、D、E、F，列表丁和F应该按顺序首先出现，例如：D、F、A、B、C、E.

li.slide.active{
color: red;
}

<ul class="sliderscroll">
  <li class="slide">
    List A
  </li>
  <li class="slide">
    List B
  </li>
  <li class="slide">
    List C
  </li>
  <li class="slide active">
    List D
  </li>
  <li class="slide">
    List E
  </li>
  <li class="slide active">
    List F
  </li>
</ul>

【问题讨论】：

你是如何尝试解决这个问题的，出了什么问题？以什么方式？请阅读“How to Ask” 指导以查看我们对网站上发布的问题的期望，然后edit您的问题以及改进和更多信息。

标签： html jquery css html-lists

【解决方案1】：

如果您准备/允许使用弹性盒子，你可以简单地使用order来改变位置弹性盒项目.

参考：MDN: Ordering flex items

ul {
    display: flex;
    flex-direction: column;
}
li {
    order: 1; /* place out of document order */
    /* the higher the number, the lower in the list */
}

li.slide.active {
    color: red;
    order: 0; /* place at top of list (above 'order 1') */
}

<h3>With .active class</h3>
<ul class="sliderscroll">
    <li class="slide">
        List A
    </li>
    <li class="slide">
        List B
    </li>
    <li class="slide">
        List C
    </li>
    <li class="slide active">
        List D
    </li>
    <li class="slide">
        List E
    </li>
    <li class="slide active">
        List F
    </li>
</ul>

<h3>No .active class</h3>
<ul class="sliderscroll">
    <li class="slide">
        List A
    </li>
    <li class="slide">
        List B
    </li>
    <li class="slide">
        List C
    </li>
    <li class="slide">
        List D
    </li>
    <li class="slide">
        List E
    </li>
    <li class="slide">
        List F
    </li>
</ul>

【讨论】：