1

JQuery 1.7.2 と JQuery UI 1.10.3 を使用して、Web サイトにタブ ウィジェットを設定しています。

タブを開き、コンテンツを div にロードし、名前付きアンカーまでスクロールできるように、URL のハッシュ部分を解析する JavaScript を作成しました。

タブを開いてコンテンツを読み込むことはできますが、アンカーまでスクロールするのは本当に面倒です。

アンカーまでスクロールする前にアラートをトリガーすると機能しますが（「OK」をクリックする必要がありますが、アラートを無効にすると（したい）、機能しません。

関数が最初に処理を完了するのを待つことと関係があると思いますか? しかし、私はJavaScriptの経験がまったくないので、誰かができる助けをいただければ幸いです.

URL example: http://www.mysite.com/abc.html#tab=tab-3&#srv=includes/xyz&#anc=myanchor

私のJavaScriptは次のとおりです。

$(document).ready(function () {
    var parts = location.hash;
    parts = parts.split('&'); // Hash parts of URL. 

    for (var i = 0; i < parts.length; i++) // Loop to separate variables. 
    {
        if (parts[i].substr(1, 4).toUpperCase() == "TAB=") {
            var tab = parts[i].substr(5).split("-").pop() - 1
        } // Tab no. part from tab name.
        if (parts[i].substr(1, 4).toUpperCase() == "SRV=") {
            var srv = parts[i].substr(5)
        } // Path to content to load.
        if (parts[i].substr(1, 4).toUpperCase() == "ANC=") {
            var anc = parts[i].substr(5)
        } // Named anchor to locate.
    };

    // Tab found in URL so we'll check it exists and open it. 
    if (tab == -1) // Tab not found?
    {
        tab = 0 // Default to 1st tab if not.
    };

    $("#tabs").tabs("option", "active", tab); // Select the tab.

    // Load content if provided in URL.
    var href = $('.list li a').each(function () {
        var href = $(this).attr('href');
        if (srv == href.substr(0, href.length - 5)) {
            var toLoad = srv + '.html .maint_content';
            $('.maint_content').load(toLoad)
        }
    });

    // Load content when selected from list.
    $('.list li a').click(function () {
        var toLoad = $(this).attr('href') + ' .maint_content';
        $('.maint_content').fadeOut('normal', loadContent);
        $('#load').remove();
        $('.maint_content').fadeIn('normal', loadContent);
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);

        function loadContent() {
            $('.maint_content').load(toLoad, '', showNewContent());
        }

        function showNewContent() {
            $('.maint_content').show('normal', hideLoader());
        }

        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;
    });

    // Scroll to locate anchor.
    //alert(anc);
    $('html, body').animate({
        'scrollTop': $('#' + anc).offset().top
    }, 1000);

});

ありがとう

4

2 に答える 2

0

divのコンテンツをajaxしています。これは、非同期でロードしていることを意味します。したがって、コンテンツの読み込みが完了する前に animate 関数が呼び出され、探しているアンカーがまだ存在しません。

ロードが完了したときにアニメーションを起動するために、関数をに渡すことができます.load()

$('.maint_content').load(toLoad,'',showNewContent());

showNewContentロードが終了したときに起動されます。したがって、アニメーション ラインをその関数の最後に移動するだけです。

function showNewContent() 
{ 
    $('.maint_content').show('normal',hideLoader());
    $('html, body').animate({'scrollTop': $('#'+anc).offset().top}, 1000);
}
于 2013-08-05T15:46:06.103 に答える