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