1

メインページ「index.html」があります。このメインページは、HTML5で行われるサイトへの入り口です。このサイトには他にも次のページがあります。

「about.html」、「work.html」、「portfolio.html」、「contact.html」

したがって、これらのページにはすべて、それに応じてコピー/テキストを持つ「contentDiv」という div があります。ユーザーは「index.html」からサイトに入り、次のいずれかのナビゲーション リンクをクリックすると、次のようになります。

について | 仕事 | 仕事 | ポートフォリオ | コンタクト

「index.html」ページは、クリックされたページの「contentDiv」のコンテンツを JQuery の load() 呼び出しを使用してロードし、ロードされた div をアニメーションを使用してスライドします。

サイトは下位互換性があるため、Javascript が無効になっている場合、ユーザーは「index.html」を使用して load() 呼び出しを介してコンテンツをロードする代わりに、クリックしたページに移動します。

ちなみに、ナビゲーションリンクは次のようにコーディングされています。

<a href="about.html" title='About'>About</a>

「index.html」が要求されたコンテンツをロードすると、 pushState() を使用して、URL が更新されます。したがって、ユーザーが「about」リンクをクリックすると、pushState() は URL を次のように更新します。

「http://www.abc.com/about.html」

javascriptが無効になっている場合に備えて、サイトにフォールバックを持たせたいので、hrefタグにハッシュを挿入していない理由. このようにして、ユーザーは「index.html」ではなく、要求されたページ (「about.html」) に誘導されます。

これまでのところ、すべてが期待どおりに機能していますが、ここに問題があります。ユーザーが「index.html」にいて、「about.html」などのセクションのいずれかをクリックすると、コンテンツが読み込まれ、URL が pushState() によって更新されます。これで、URL は「http://www.abc.com/about.html」になりました。ユーザーがページ ("index.html") を更新すると、load() 呼び出しを実行する "index.html" の代わりに "about.html" がロードされるようになりました。

nav href タグを次のようにコーディングするとします。

<a href="#about" title="about">About</a>

次に、URL にハッシュが含まれることになります。また、「http://www.abc.com/#about」というリンクをコピーしてユーザーに電子メールで送信すると、ユーザーが JavaScript を無効にしたブラウザーでリンクを開こうとすると、ユーザーは「about」にアクセスできなくなります。リンクには「about.html」ではなく「#about」しか含まれていないためです。

私がやろうとしていることは実際に実行可能ですが、それにアプローチする方法がわかりません。誰かがこれについて私を助けることができれば、それは素晴らしいことです.

長い説明で申し訳ありません。

ありがとうございました。

4

2 に答える 2

1

最終的に、すべての nav href を "" に設定しました。次に、 document.ready() 関数で hrefs 値を設定します。

$('a[rel=nav]').attr('href', '');

ありがとう。

于 2012-08-26T20:57:51.210 に答える
0

このコードは、あなたがする必要があることを達成し、javascriptを無効にしたユーザーをサポートします。

$('a').click(function() {
  window.location.hash = $(this).attr('src');
  return false;
}

アバウトリンクをクリックすると、URLはhttp://www.yoursite.com/#about.htmlのようになり、更新すると機能します。ajaxサイトの作成について詳しく知りたい場合は、このブログCss-Tricks.comにアクセスすることをお勧めします。

于 2012-08-17T03:29:59.490 に答える