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元素上的<a id="something">处理程序。结合您当前缩短的代码：

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

1 个答案: