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

Question

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

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

如果没有锚或它无法识别，那么就什么也不做。

score 5 · Accepted Answer

怎么样

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

score 0 · Accepted Answer

0

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

于 2012-08-13T23:24:21.247 回答

score 0 · Accepted Answer

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

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

3 回答 3