Создаем удобные, практичные вкладки с помощью jQuery

Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью "Универсальный jQuery-скрипт для блоков с вкладками (табами)". * * * Примерно последние месяц-два на англоязычных блогах мне стали попадаться на глаза блоки в сайдбаре, переключаемые с помощью вкладок-табуляторов, которые, судя по всему, становятся ...

Комментарии (50)

  1. *preventDefault();
    ;)

  2. А у меня вот глюк! Работаю с системой Битрикс. Понять не могу где косякнул, 8 раз код пересмотрел, понял что в css, а как избавится не знаю. Может есть кто помочь может?

  3. А я , извините, не понял как подсоединить к каждому табу определенные виджет, работаю на WordPress, напишите доступно пожаллста.

  4. Все, у меня получилось, спасибо, разобрался. Расту:-)

  5. А кто нибудь знает как индексируется данный трюк? по первой таблице или в общем?

  6. хм, так и не понял куда подключать 4 шаг? И как?

  7. Как подключить разобрался ^^ Только есть проблема. Работаю с форумом vbulletin. И в нем когда я вставляю скрипт из 4 пункта, корячит весь шаблон, т.е у меня на главной 3 столбца с инфой, а при подключении сего скрипта все уходит в 1 колонку.

  8. А динамически можно создавать вкладки как на http://i.pr-cy.ru/panel.php

  9. подскажите как добавить еще один элемент, например ссылку или кнопку при нажатии которой открывалась бы предположим третья вкладка?

  10. $j(‘#link’).click(function(){
    $j(‘div.t1’).hide();
    $j(‘div.t2’).hide();
    $j(‘div.t3’).hide();
    $j(‘div.t4’).show();
    $j(‘ul.tabs.tabs1 li’).removeClass(‘tab-current’);
    $j(‘li.t4’).addClass(‘tab-current’);
    });

  11. Супер!!!!!!!
    Огромное спасибо за метод)

  12. А как сделать ссылку например на вторую вкладку??

    • Если имеете в виду сделать по умолчанию активной вторую вкладку, тогда из <li class="t1 tab-current"> нужно перенести tab-current в тег второй вкладки, ну и вместо div.t2 {display: none} сделать div.t1 {display: none}.

      • Спасибо за ответ.
        Нет, по умолчанию я хочу первую вкладку. Но на другой странице сайта необходимо сделать ссылку на вторую вкладку.

        Т.е. у меня на другой странице две ссылки:
        1) на страницу, где по умолчанию открывается первая вкладка
        2) на эту же страницу где откроется вторая вкладка.

        Пока писал понял :)
        Можно передать условие и применить стиль где будет . Так?

  13. сделал на странице четыре разных блока с вкладками, все отлично работает…
    делаю пятый и он не работает, при открытии страницы открывается первая вкладка, но при нажатии на нее или на вторую все пропадает, получается отрабатывает:
    $(‘div.tm1’).hide();
    $(‘div.tm2’).hide();
    и не отрабатывает:
    $(‘div.’ + thisClass).show();

    но на четырех других работает… код одинаковый…

  14. а можно как-нибудь сделать так чтоб вкладки были с боку?

  15. Такая шляпа:

    var $j = jQuery.noConflict();

    $j(document).ready(function() {

    $j(‘ul.tabs li’).css(‘cursor’, ‘pointer’);

    $j(‘ul.tabs.tabs1 li’).click(function(){
    var thisClass = this.className.slice(0,2);
    $j(‘div.t1’).hide();
    $j(‘div.t2’).hide();
    $j(‘div.t3’).hide();
    $j(‘div.t4’).hide();
    $j(‘div.t5’).hide();
    $j(‘div.t6’).hide();
    $j(‘div.t7’).hide();
    $j(‘div.t8’).hide();
    $j(‘div.t9’).hide();
    $j(‘div.t10’).hide();
    $j(‘div.t11’).hide();
    $j(‘div.’ + thisClass).show();
    $j(‘ul.tabs.tabs1 li’).removeClass(‘tab-current’);
    $j(this).addClass(‘tab-current’);
    });

    });

    вместо десятой вкладки вызывается первая, одиннадцатая — вообще не вызывается.
    Голову сломал — не помогло :-)
    Help!

  16. А дай, думаю, воспользуюсь советом №44 — так ведь помогло!
    В двух словах, если можно, поясните: что произошло?