1

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

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

我可以打开标签并加载内容，但是，滚动到锚点被证明是一个真正的痛苦。

如果我在滚动到锚点之前触发警报（强制您单击“确定”，但如果我禁用警报（我想要），它就不起作用。

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

我假设您要跳转到的锚点在加载的内容中？

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

$('.maint_content').load(toLoad,'',showNewContent()).done(function () {
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
});
于 2013-08-05T15:44:24.463 回答
0

您正在 ajaxing div 的内容。这意味着它是异步加载的。因此，在内容加载完成之前调用 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 回答