在页面加载时，只有一个列表元素首先出现

Question

如何使一个li元素成为第一个，如下一页中的用户点击（www.url.com/demo/#collapse1） - 应该是第一个或（www.url.com/demo/ ＃collapse5） - 应该是第一个？当你在同一页面时，其他元素将留在他们的位置。 www.url.com/demo

$('li').click(function() {
  $(this).prependTo($(this).parent());
});

body {
  font-family: verdana;
  font-size: 12px;
}

a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 100%;
  padding: 8px 0;
  text-indent: 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

ul li {
  background: #eee;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#one">01</a></li>
  <li><a href="#two">02</a></li>
  <li><a href="#three">03</a></li>
  <li><a href="#four">04</a></li>
  <li><a href="#">05</a></li>
</ul>

Answer 1

我非常确定您正在寻找在第一个元素和点击元素之间进行切换的方法。以下是使用.detach实现此目标的方法。首先，我们抓住.siblings，然后通过.eq从列表中获取第一个元素。从那里我们分离它（或者将它从HTML中删除但保存它作为一个变量。接下来我们将我们点击的元素添加到父元素中，仅在分配first之后将其附加到我们当前的后面基本上，交换这两个元素。

＆＃13;

＆＃13;

$('li').click(function() {
  first = $(this).siblings().eq(0).detach()
  $(this).parent().prepend($(this).after(first).detach());
});

if (window.location.hash != "") {
	$('li').eq(Number(window.location.hash.slice(1))-1).click();
}

＆＃13;

body {
  font-family: verdana;
  font-size: 12px;
}

a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 100%;
  padding: 8px 0;
  text-indent: 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

ul li {
  background: #eee;
  margin-bottom: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#1">01</a></li>
  <li><a href="#2">02</a></li>
  <li><a href="#3">03</a></li>
  <li><a href="#4">04</a></li>
  <li><a href="#5">05</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;