1

jQueryの移行に関する別の質問で以前に助けを受け取り、Webサイトが適切に動作するようになりましたが、このjQueryの移行についてもう少し詳しく説明する必要があります...

アドレスバーに書かれたハッシュタグに基づいて、特定のエフェクト/トランジションが発生する必要があります。これは、 pckillによる他の質問によって提供されるコードです。

$('.nav').on('click', 'li', function(){
var id = $(this).data('id');

var breadcrumbs = document.getElementById('breadcrumbs');
breadcrumbs.innerHTML = 'IMGit &raquo; <span class="capitalize">' + id + '</span>';

var current = $('#inner').find('[data-page=' + id + ']');
if (current.hasClass('hidden'))
{
    current.css('marginLeft', '-200%');
    $('#inner > div').not(current).animate(
        {marginLeft: '100%'},
        'fast',
        function(){
            $('#inner > div').not(current).addClass('hidden');
            current.removeClass('hidden');
            current.animate({marginLeft: '0%'}, 'fast');
    });
}
});

これが HTML です: http://pastebin.com/pu7jmefC

たとえば、誰かを にリンクするとします。http://mywebsite.com/index.php#remoteユーザーを jQuery で適切な div に移行させたいとします。上記のアプローチは私が持っているメニューで完全に機能しますが、誰かと URL を共有できるようにしたいのですが、適切な divに直接アクセスできます。

上記のコードを変更して、私が求めていることを実行できるようにする必要があると思いますが、残念ながら、私は Javascript/jQuery があまり得意ではありません。

このあたりのコードに手を加える必要があると思います: $('#inner > div').not(current).

ハッシュタグを使用する必要があることはわかっていwindow.location.hashますが、上記のコードでハッシュタグを使用する方法がわかりません。

アイデア？

4

1 に答える 1

1

ページの読み込み時にハッシュを確認し、それに応じてアクションを実行する必要がある場合、それは本当に簡単です。まず最初に、divに移行するロジックを別の関数に移動する必要がありますtransitionToDiv。

function transitionToDiv(id) {
    var current = $('#inner').find('[data-page=' + id + ']');
    if (current.hasClass('hidden'))
    {
        current.css('marginLeft', '-200%');
        $('#inner > div').not(current).animate(
            {marginLeft: '100%'},
            'fast',
            function(){
                $('#inner > div').not(current).addClass('hidden');
                current.removeClass('hidden');
                current.animate({marginLeft: '0%'}, 'fast');
        });
    }
}

そして、クリックイベント（質問のコード）を次のように変更します。

$('.nav').on('click', 'li', function() {
    var id = $(this).data('id');

    var breadcrumbs = document.getElementById('breadcrumbs');
    breadcrumbs.innerHTML = 'IMGit &raquo; <span class="capitalize">' + id + '</span>';

    transitionToDiv(id);
}

ここで、アドレスハッシュに基づいてページロード時にdivに移行するには、ページロード後のある時点でこれらの行を追加するだけです。

var id = window.location.hash.substr(1);
transitionToDiv(id);
于 2012-12-23T15:28:29.393 に答える