javascript - 触发 jQuery 动画的主题标签

Question

我之前在另一个有关 jQuery 转换的问题中得到了帮助，并且我的网站能够正常运行，但现在我需要更深入地了解这个 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 来处理主题标签，但我不知道如何在上面的代码中使用它。

想法？

Answer 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);