1

我早些时候在另一个关于一些 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使用主题标签，但我不知道如何在上面的代码中使用它。

想法？

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 回答