Question

我有一个带有几个li元素的ul，其中一个将始终具有“active”类。如何使li.active元素始终显示在列表顶部？

我无法控制产生此列表的html输出，因此我必须使用css（最好）或javascript / jquery来执行此操作。我想用css没有办法做到这一点，但是有一种列表位置属性会很棒。

非常感谢！

Answer 1

如果我们假设列表项的高度将是恒定的（这是一个非常大的假设）：

ul {
  position: relative;
  padding-top: 2em;
}

li {
  height: 2em;
}

li.active {
  position: absolute;
  top: 0;
  left: 0;
}

Answer 2

如果（而且我认为你这样做）你需要操纵列表项的实际顺序，正如你猜测的那样，CSS本身不会削减它。你用'jquery'标记这篇文章所以我猜你知道那个库的选择器等等。当然你只需要（a）选择“活动”类的li元素，然后（b）在无序列表的顶部插入所述项目？这在jQuery中是完全可行的。这是一种（非常）简单的方法：

    $('ul').prepend($('.active'));

所有这一切都是抓住页面上第一个带有“活动”类的元素，并将其添加到第一个无序列表中。这可能过于简单，无法满足您的需求，但希望它能帮助您找到更强大的解决方案。

在ul中改变给定类的li元素的位置？

2 个答案: