根據網址中的散列值移動HTML

當用戶訪問該頁面時，我想要執行的操作是，網址中的錨點將確定頂部顯示的內容。這應該在客戶端完成，而不是在服務器端完成。根據網址中的散列值移動HTML

例如，假設我有HTML：

<div id='menuitems'> 
    <div id='appetizer'>HTML here</div> 
    <div id='maincourse'>HTML here</div> 
    <div id='dessert'>HTML here</div> 
</div>

所以，我要的是當用戶訪問這個頁面：

mypage.html#dessert

而不是通常的錨文本的行爲，我想使用類似jquery的東西來將甜點文本移動到頂部。因此，用戶看到的HTML是這樣的：

<div id='menuitems'> 
    <div id='dessert'>HTML here</div> 
    <div id='appetizer'>HTML here</div> 
    <div id='maincourse'>HTML here</div> 
</div>

或：mypage.html#maincourse

<div id='menuitems'> 
    <div id='maincourse'>HTML here</div> 
    <div id='appetizer'>HTML here</div> 
    <div id='dessert'>HTML here</div> 
</div>

如果沒有錨，或者它無法識別的然後就什麼也不做。

來源

2012-08-13 Keltex

如何

$(document).ready(){ 
    $('#menuitems > ' +location.hash).prependTo('#menuitems'); 
});

http://api.jquery.com/prependTo/

來源

2012-08-13 23:20:53 Musa

可以更好的寫作'$（ '＃的菜單項'）孩子（的location.hash）.prependTo（ '＃的菜單項'）;'所以你只能搜索孩子，而不是它下面的一切。 – JayC 2012-08-13 23:59:18

$(function() { 
    $(window.location.hash).prependTo('#menuitems') 
});

來源

2012-08-13 23:24:21

隨着你不想更換所有鏈接屬性。你可以這樣做（用jQuery）：

$('a[href^="#"]').on('click', function(){ 
    window.location.hash = $(this).attr('href'); 
    return false; 
});

來源

2016-03-26 01:27:08 Gabriel

根據網址中的散列值移動HTML

回答

相關問題