Доступные вкладки jquery - прямая ссылка на вкладку - PullRequest
Новая
       21

Доступные вкладки jquery - прямая ссылка на вкладку

0 голосов
/ 17 октября 2010

У меня есть вкладки на моей странице. Код для них следующий: 

$('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

Атм при загрузке страницы показывает TabLinkforContent1, и теперь пользователь должен нажать, например, ссылку TabLinkforContent3 для просмотра Контента на div3. Я хочу изменить код, чтобы пользователь мог скопировать адрес TabLinkforContent3 и передать его кому-либо, и если он использует этот URL, он автоматически отобразит содержимое div3. Так что url был бы что-то вроде www.domain.com/page#div3 я думаю. Но я не знаю, как изменить код JavaScript.

Любая помощь будет оценена :)

1 Ответ

1 голос
/ 17 октября 2010

Поскольку ваши ссылки основаны на идентификаторах, вы можете просто поставить это после вашего текущего кода: 

$(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">, который имеет идентификаторы. В сочетании с вашим текущим кодом сокращен:

...