javascript - 根据 URL 中的哈希移动 HTML

Question

当用户访问页面时我想做什么，url中的 anchor 将决定顶部显示什么内容。这应该在客户端完成，而不是在服务器端。

例如，假设我有 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 之类的东西将甜点文本移到顶部，而不是通常的 anchor 文本行为。所以用户看到的 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>

如果没有 anchor 或无法识别 anchor ，则什么都不做。

Answer 1

怎么样

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

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