タブコンテンツのハッシュタグを処理するシステム？ （！＃）

Question

取り組んでいるウェブサイトのメイン部分に4ページがあり、それらを切り替えるタブがあります。 4つのタブ間の切り替えをフェージングトランジション（jQueryを使用して）にしたいと考えています。それはすべて大丈夫でダンディですが、SEOにそれぞれを別のページと考えてもらいたいです。また、技術的には同じページであるにもかかわらず、URLにリンクし、適切なコンテンツをプルアップできるようにしたいと思います。

Facebookはこれを行います（facebook.com/#!/notherString-here）。写真などを切り替えることができるので、JavaScriptクエリストリングとして機能します。

これにより、すぐに切り替えることができます。これにリンクする機能がありますが、それぞれが独自のページとして機能します。

これを行う方法については、推奨される方法はありますか？

---

私が見つけた最高の更新はsammyjsです - 実装していませんが、それは最良の答えのように見えます：http://sammyjs.org/

Answer 1

あなたが呼ばれるベースページを持っているとしましょう services, 、そのページには2つのタブがあります。 design と development （単純化のためだけ）。あなたのドメインがあった場合 example.com, 、「デザイン」タブをクリックすると、ハッシュURLが次のようになります http://example.com/services#!/design, 、および開発についても同様です。私はあなたがそれをする方法を知っていると思います。

検索エンジンにタブを認識させるために、あなたがすることは 各ページの静的バージョンを作成します. 。だからあなたはそれを持っているだろう http://example.com/services/design そして1つ http://example.com/services/development. 。 href 各タブの属性は実際にこれらの静的ページを指しますが、各タブにオンクリックハンドラーを添付して、ハッシュバージョンに移動します。

これにより、JavaScript対応のクライアントは、ハッシュタグとフェードエフェクトを備えたページのAjaxyバージョンを取得しますが、JavaScriptのないクライアント（Webクローラーを含む）が通常の静的リンクが表示され、全員が勝ちます。

---

記録のために、これはFacebookが行っていることに似ています。彼らはさらに一歩進んで、HTML5の新しいを使用します history.pushState() ハッシュタグの必要性を完全に削除するために、それをサポートするブラウザで機能します。 （見る この質問 詳細については。）

Answer 2

サーバーがハッシュタグを送信せず、ほとんどの検索エンジン（Googleなど）がJavaScriptを実行しないため、両方の方法を持つことは不可能です（FacebookメソッドとSEO）。

これで、フェードエフェクトが必要な場合は、URLにハッシュタグがある場合など、セットアップできます。 #fade, 、jQueryは不透明度を0に設定し、負荷を待ってフェードインします。フェードアウトするには、リンクでイベントリスナーを設定します。 e.preventDefault() また return false その機能では、不透明度をフェードアウトします。フェードが完了すると、JavaScriptの変更が新しいページに変更される可能性があります location.href="site" ハッシュで #fade

編集：例： http://fiddle.jshell.net/msm595/u5eg2/3/show/light/