可访问的 jquery 选项卡 - 直接链接到选项卡

Question

我的页面上有选项卡。它们的代码如下：

$('ul#tabs li a').click(function(){
        var id = $(this).attr('id');

        var counter = 1;

        $("ul#tabs a.current").removeClass('current');

        $(this).addClass('current');

        $('.contentBox').not('.' + id).hide();

        $('.contentBox.' + id).show();

        if(id=='all'){
            $('.contentBox').show();
        }

        $('.contentBox').removeClass('last');

        $('.contentBox').each(function() {          
            if(counter%4==0) {
                $(this).addClass('last');
            }

            if($(this).css('display')!='none'){
                counter++;
            }
        });

        return false;
    });

现在我想添加直接链接的可能性，以便用户可以将链接复制到某个选项卡并将其粘贴到地址栏，然后立即转到该选项卡/div。像这样：

TabLinkforContent1 TabLinkforContent2 TabLinkforContent3

Atm 在页面加载时显示 TabLinkforContent1，现在用户需要单击 TabLinkforContent3 链接来查看 div3 上的内容。我想更改代码，以便用户可以复制 TabLinkforContent3 地址并将其提供给某人，如果他使用该网址，它会自动显示内容 div3。所以我猜 url 应该是这样的 www.domain.com/page#div3 。但我不知道如何更改 javascript 代码。

任何帮助将不胜感激:)

Answer 1

由于您的链接是基于 ID 的，因此您可以将其放在当前代码之后：

$(function() {
  $('ul#tabs li a').click(function(){
    $("ul#tabs a.current").removeClass('current');
    $(this).addClass('current');

    $('.contentBox').show().removeClass('last');
    if (this.id !='all') $('.contentBox').not('.' + this.id).hide();

    $('.contentBox:visible').each(function(i) {          
      if ((i+1)%4==0) $(this).addClass('last');
    });
    return false;
  });
  if(location.hash) $(location.hash).click();
});

这将触发您刚刚在 click 处理程序code> 元素具有标识。结合您当前的代码缩短：