3

いくつかのタブがあるサイトがあります。タブをクリックすると、URL は次のように変わります。

www.example.com/site1.html#tab-2
www.example.com/site1.html#tab-5

したがって、2 つのタブ (URL が 2 回変更されます) をクリックしてから browser-history-back-button をクリックすると、ブラウザは最初にすべての URL 変更を通過してから、最終的に現在のサイトの前にサイトにアクセスします。見る。

それを避ける方法は？browser-history-back-butten をクリックしている場合、以前にクリックしたタブの数 (および URL がこのように変更された回数) に関係なく、最後のページにジャンプしたい

敬具

4

2 に答える 2

3

ユースケースから特定の HTML または JavaScript がなければ、最適なアプローチを絞り込むのは困難です。とはいえ、履歴の状態とハッシュを処理する場合、ツールキットには実際には 3 つの重要なツールがあります。

変更の防止

次のように、タブのハンドラー コードでevent.preventDefault();( docs )を使用して、問題全体を回避することもできます。

$('.tab').on('click', function (e) {
   e.preventDefault();
   ...
});

ユーザーがタブをクリックすると、すぐに呼び出さpreventDefaultれます。これにより、デフォルトのアクションが続行されなくなります。この場合、ドキュメントの URL を変更する (おそらく) リンクの既定の動作を妨げています。は...、タブ クリック アクションを処理するための既存のコードを示します。

結局のところ（ユースケースを確認せずに）、これはおそらく「最良の」アプローチです。少なくとも、それはより簡単です。

変化の検出

オブジェクトのonhashchangeイベント( docs、ブラウザーのサポートが制限されていることに注意してください) を使用して、ハッシュの変更を検出できます。window

オブジェクトのonpopstateイベントは同様の方法 ( docswindow )で使用できますが、これは微妙に異なり、「タブ」の実装方法や、履歴に対する他の変更を監視する必要があるかどうかによっては、より適切な場合があります。州。

$(window).on('hashchange', function (e) {
   console.log('hash change', e);  
});

$(window).on('popstate', function (e) {
    console.log('popstate', e);
});

ここで両方の動作を確認してください: http://jsfiddle.net/m7qV9/1/ (必ずコンソールを開いてください)

これらのアプローチのいずれかで、historyオブジェクト ( docs ) を使用して、必要に応じて履歴の置換または追加を管理します。

1 つのアプローチ: 交換

を使用した小さなサンプルを次に示しhistory.replaceStateます。このアプローチにより、アクティブなタブの識別子を URL に保持できるため、ユーザーは履歴を通じて元の場所に戻ることができますが、タブが変更されるたびに履歴レコードが乱雑になることはありません。http://www.mySite.com/#tab2たとえば、ページがロードされたときにタブ #2 が開きますが、ユーザーがタブ 1 に切り替えて別のページに移動してから戻ってきた場合、タブ #1 がアクティブになります。

これは概念のモックアップであることを覚えておいてください。既存の HTML と JavaScript がどのように見えるかはわかりません。そのため、特定の実装に対する直接的なソリューションを作成するのではなく、アプローチを示すだけです。

$('.tab').on('click', function (e) {
   e.preventDefault();
   var whichtab = $(this).attr('href');
   $(this).parent().find('.active').removeClass('active');
   updateTab(whichtab, $(this).parent());
   return false;
});
$(document).ready(function() {
    if (document.location.hash.length > 0)
        updateTab(document.location.hash);
});
var updateTab = function (tab, parent) {
    if (!parent)
        parent = document;
    if (parent.find('.tab[href='+tab+']').length < 1)
        return;
    parent.find('.tab[href='+tab+']').addClass('active');
    parent.find('.tabContent-'+tab.replace('#', '')).addClass('active');
    window.history.replaceState({}, '', tab);
    return true;    
};

ここで試してみてください: http://jsfiddle.net/5Qegc/

どの JavaScript と HTML を使用しているかをよく理解していなければ、正確に判断することは困難です。お役に立てれば。

ドキュメンテーション

于 2013-07-08T16:26:09.407 に答える
-2

アンカー タグの href 属性で「javascript:void(0)」を使用できる場合があります。

このような

</`<a href = 'javascript:void(0)'>Tab-2</a>`
于 2013-07-12T10:35:26.800 に答える