Javascript 队列命令

Question

我使用 JQuery 1.7.2 和 JQuery UI 1.10.3 在我的网站上设置了一个选项卡小部件。

我编写了一个 JavaScript 来解析 URL 的哈希部分，以便我可以打开选项卡、将内容加载到 div 中并滚动到命名 anchor 。

我可以打开选项卡并加载内容，但是事实证明，滚动到 anchor 确实很痛苦。

如果我在滚动到 anchor 之前触发警报(强制您单击“确定”)，我可以让它工作，但如果我禁用警报(我想要)，它就不起作用。

我猜测这与等待函数首先完成处理有关？但我对 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);

});

谢谢

Answer 1

我假设您要跳转到的 anchor 位于加载的内容中？

如果是这样，只需向 ajax 调用添加一个回调并跳转到那里:

$('.maint_content').load(toLoad,'',showNewContent()).done(function () {
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
});