只有一個列表元素首先在頁面加載

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>