1

我将以下代码用于一些简单的选项卡，并且想知道是否可以编辑此代码以启用深度链接？我没有使用 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;
    });
4

1 回答 1

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 肯定没有意义）并在页面加载时触发（以处理深层链接）。

于 2012-09-27T02:24:47.673 回答