Jquery Post UIタブがページアンカーと正しくリンクしていない

ページアンカーを使用して、メニューから特定のタブにユーザーを誘導しています。しかし、タブをクリックしてページを開いているときに、リンクはリダイレクトされません。単にURL内のハッシュを変更します。どのように私はこれを解決することができる任意のアイデア？Jquery Post UIタブがページアンカーと正しくリンクしていない

例リンク

http://www.website.com/page#1

これはところで、ワードプレスです。

jQuery(document).ready(function($){ 
    $(function() { 
     $("#tabs").tabs(); 
    if(document.location.hash!='') { 
      //get the index from URL hash 
      tabSelect = document.location.hash.substr(1,document.location.hash.length); 
     $("#tabs").tabs('select',tabSelect-1); 
    } 
    }); 
});

出典

2011-08-04 Zach Shallbetter

あなたは、これらの変更は、ページの負荷を誘発しないように、時にハッシュの変化を検出するためにjqueryのを使用してhashchangeイベントに耳を傾ける必要があります。（上記のリンクでの答えが、これは別のブラウザに対して異なる動作を、言うように詳細

、そして最終的にあなたはベンAlmanのスクリプトから最良の結果を得るでしょう - On - window.location.hash - Change?

編集：詳細については、この回答を参照してください。ジョセフも以下に言及しているように）。しかし、それを壊すことができます。ここで

は、H1タグにハッシュをプッシュの簡単な例です：

<!DOCTYPE html> <html> <head> <title>Hash Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> function getHash() { return document.location.hash.substr(1); } $(document).ready(function() { if(document.location.hash != '') { $('#sectionName').html(getHash()); } $(window).bind('hashchange', function() { $('#sectionName').html(getHash()); }); }); </script> </head> <body> <h1 id="sectionName"></h1> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> </body> </html>

ちょうどURLにハッシュを変更注意点はないだろうと、この例では、IE8を含む、最新のブラウザで動作しますIEで新しい履歴エントリを作成します。ユーザーの操作によってハッシュが変更されると、履歴エントリが正常に作成されます。

あなたは以下IE7をサポートする予定とした場合、その後、最良のアプローチが原因の代わりに使用すると、プラグインによって作成されたイベント機能をサブスクライブイベントに耳を傾けるbindを使用しての、わずかに我々のコードを変更する、Ben's pluginを使用することです：

<!DOCTYPE html> <html> <head> <title>Hash Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.ba-hashchange.min.js"></script> <script type="text/javascript"> function getHash() { return document.location.hash.substr(1); } $(document).ready(function() { $(window).hashchange(function() { $('#sectionName').html(getHash()); }); //trigger the change for a hash set at page load if(document.location.hash != '') { $(window).hashchange(); } }); </script> </head> <body> <h1 id="sectionName"></h1> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> </body> </html>

出典

2011-08-15 17:44:37 shanethehat

もう少し説明してください。私はそれを働かせるように見えない。 –

@Zach - 詳細 – shanethehat

旧式のブラウザでは完全にサポートされていないため、Ben AlmanのjQueryプラグインを使用してハッシュ変更イベントをリッスンする必要があります。ポイントで

http://benalman.com/news/2010/01/jquery-bbq-v11-and-jquery-hashchange-event-v10/

ケース：手動でハッシュをポーリングしても、[戻る]ボタンは、IE6で動作しません。これは、IE6がハッシュ変更時に新しい履歴状態をプッシュしないためです。 Benのプラグインは、（目に見えないiframeを持つことによって）これを処理し、さらに多くのニュアンスをもたらします。

出典

2011-08-15 18:11:59

Jquery Post UIタブがページアンカーと正しくリンクしていない

答えて

関連する問題