根据URL中的哈希移动HTML

Question

当用户访问网页时我想要做的是，网址中的锚点将确定顶部显示的内容。这应该在客户端完成，而不是在服务器端完成。

例如，假设我有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>

如果没有锚或者它没有被识别，那么就不要做任何事情。

Answer 1

怎么样

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

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

Answer 2

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

Answer 3

您不想替换所有链接属性。你可以这样做（使用Jquery）：

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