只有一个列表元素首先在页面加载

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从列表中获取第一个元素。接下来，我们将我们点击的元素添加到父元素中，只在将元素first添加到我们的当前元素之后，才将其分开，基本上， 。交换两个元素

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

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

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="#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>