1

いくつかの単純なタブに次のコードを使用していますが、このコードを編集してディープ リンクを有効にできるかどうか疑問に思っています。私は jQuery UI を使用しておらず、プラグインも使用したくないと考えています。事前に乾杯してください。

  $('#tabber > div').hide(); // Hide all divs

    $('#tabber ul li a').click(function () { // When link is clicked
        $('#tabber ul li').removeClass('active'); // Remove active class from links
        $(this).parent().addClass('active'); //Set parent of clicked link class to active
        var currentTab = $(this).attr('href'); // Set currentTab to value of href attribute
        $('#tabber > div').fadeOut(200); // Hide all divs
        $(currentTab).fadeIn(200); // Show div with id equal to variable currentTab
        return false;
    });
4

1 に答える 1

1

私はブラウザの互換性のために軽量のプラグインを使用するつもりです .

ディープ リンクを実装するには、関連するロジックをその個別の場所 (RESTy のアドレス指定可能性) の一部と考える必要があり、既存のアニメーション コードになんらかの改造を加えようとしないでください。つまり、ハッシュの変更は UI を駆動し、その逆ではありません。

そのプラグインを使用して上記のロジックを変更し、UI が標準のリンクにすぎないようにし (のようなもの<a href="#tab_foo"...>)、ハッシュの変更に反応するように表示ロジックを変更します。

$(window).hashchange(function () {
    $('#tabber ul li').removeClass('active');       
    var currentTab$ = $(location.hash);
    currentTab$.parent().addClass('active');
    $('#tabber > div').fadeOut(200);
    currentTab$.fadeIn(200);
});

必要に応じて微調整し (実際の DOM では意味をなさないものもあります)、ページの読み込み時にトリガーします (ディープ リンクを処理するため)。

于 2012-09-27T02:24:47.673 に答える