Question

我正在使用以下代码作为一些简单的标签，我想知道是否可以编辑此代码以启用深层链接？我没有使用jQuery UI，也不想使用插件。提前为您提供帮助。

  $('#tabber > div').hide(); // Hide all divs

    $('#tabber ul li a').click(function () { // When link is clicked
        $('#tabber ul li').removeClass('active'); // Remove active class from links
        $(this).parent().addClass('active'); //Set parent of clicked link class to active
        var currentTab = $(this).attr('href'); // Set currentTab to value of href attribute
        $('#tabber > div').fadeOut(200); // Hide all divs
        $(currentTab).fadeIn(200); // Show div with id equal to variable currentTab
        return false;
    });

Answer 1

我将使用轻量级插件来实现浏览器兼容性，因为我发现其他任何错误： http://benalman.com/projects/jquery-hashchange-plugin/

要实现深层链接，您需要将相关逻辑视为该不同位置（RESTy可寻址性）的一部分，而不是尝试对现有动画代码进行某种改进。或者换句话说，哈希更改驱动UI而不是相反。

使用该插件并更改上述逻辑，以便UI只是标准链接（类似<a href="#tab_foo"...>），然后更改显示逻辑以响应哈希更改：

$(window).hashchange(function () {
    $('#tabber ul li').removeClass('active');       
    var currentTab$ = $(location.hash);
    currentTab$.parent().addClass('active');
    $('#tabber > div').fadeOut(200);
    currentTab$.fadeIn(200);
});

根据需要调整（其中一些肯定对实际DOM没有意义）并触发页面加载（处理深层链接）。

jQuery深层链接

1 个答案: