Спасибо, отличная реализация (скопировал к себе в блог, со ссылкой)

Ещё хочу спросить как Вы оформляете код с выводом по номерам?

Спасибо

Я использую плагин для WordPress WP-Syntax-. Удобный и поддерживает подсветку необходимых синтаксисов. Для подсветки нужного синтаксиса, достаточно прописать псевдоатрибут lang для тега pre, в который заключен код:
<pre lang=”LANGUAGE” line=”1″> … </pre> – line задает номер первой строки от которой пойдет отсчет. Значения LANGUAGE можно найти на сайте разработчика плагина.

То что надо.
Только как сделать, чтобы можно было на странице выводить две или три таких таблички. Попробовал – при нажатии, например, на любую вкладку второй таблички, закрываются все вкладки первой, а хотелось бы, чтобы последняя открытая оставалась.
И еще – таким же скриптом пользуется модуль gtranslate для перевода “на лету” и получается конфликт, переводчик не работает.
Подскажите, как реализовать задуманное. Спасибо.

intro, специально для Вас добавил апдейт к посту с примером(примерным) реализации нескольких блоков вкладок на странице. Скрипт функциональный и в нем нет необходимости делать правки при изменении количества блоков с вкладками.

Спасибо. Но вот вкладки не переключаются. А в javascript я ни бум-бум. Не могли бы исправить?

Конкретнее, пожалуйста: что именно у Вас не работает?

Со вкладками проблем нет, но вот переключаться не хотят, перебрасывает вверх страницы. Первоначальный вариант работает и из папки и при прописывании кода в шаблон (joomla), а вот вариант для независимых таблиц – нет. Насколько я понял, не работает js-код.

Перебрасывание вверх страницы происходит из-за того, что у Вас некорректно объявлено событие щелчка по табу. Посмотрите в примере http://web4develop.ru/wp-content/uploads/2010/08/tabs2.1/index.html

спасибо, замечательная статья, очень пригодилась! =)

Добрый день,

вопрос от новичка, есть ли пример переключения между табами без использования jQuery. Здоровая сильно.Хотел на микроконтроллере попробовать.
Спасибо

автор нифига не че так и не объяснил, для новичков как я ни чо не понятно

Саня, Вам бы для начала научится излагать свои мысли. Как говорится: “правильно составленный вопрос – это половина ответа”.

Спасибо вам за классное меню. Реализовал на основе вашего примера меню навигации. Только вот небольшой недочет: когда переключаешься между табами и нажимаешь по ссылке к примеру из второго таба. После загрузки новой странички меню не запоминает, что мы находимся на 2-ом табе и загружается снова с первого. Это немного неудобно. Может быть у вас есть мысли, как сделать, чтобы менюшка стала более интеллектуальной и запоминала с какого таба был переход. Надеюсь выразился понятно ))

Chester. рад, что мой пост помог Вам. Насчет “недочета”: я бы не сказал, что это “недочет”, скорее Вам нужно доработать данный пример под свои конкретные цели. Так сходу могу предложить два варианта, для решения вашей задачи:
1) Используя Coockies, записывать в них последний активный таб, а при перезагрузке страницы JavaScript’ом выставлять необходимому табу class="active";
2) Возвращать от сервера HTML с уже проставленным class=”active” для конкретной вкладки.

Огромное спасибо за статью!
Менюшка работает отлично, но вот с моим мягко говоря “небольшим” опытом столкнулся с проблемой. Может поможете разрешить!?
Суть: Справа от меню еще один div с контентом. Суть проблемы выравнивание этих блоков.
С jQuery не очень дружу, по этому на чистом JavaScript (не без помощи Интернета) получилось так:

function eqHeight () {
        var a = document.getElementById("tabsContent");
        var b = document.getElementById("rBar");
        var aH = a.offsetHeight;
        var bH = b.offsetHeight;
        if (aH > bH) {
            a.style.height = (aH - 20) + 'px';
            b.style.height = (aH - 20) + 'px';
        }
        else  if (aH < bH){
            a.style.height = (bH - 20) + 'px';
            b.style.height = (bH - 20) + 'px';
        }
}

Скрипт работает, вот только на событие onclick не вешается никак не пойму почему. Т.е. если переходишь на другую вкладку, с другой длиной правый div уже не подстраивается!
У Вас в меню клик по ссылке уже обрабатывается, может можно его как-то туда внедрить?

Пока вот что получается:

$("#tabs li a").each(function (i) {
		$("#tabs li a:eq("+i+")").click(function(){
            var tab_id=i+1;
            var tallestcolumn = 0;
            currentHeight = $("#tab"+tab_id).height();
            if(currentHeight > tallestcolumn) {
                tallestcolumn  = currentHeight;
            }
        $("#rBar").height(tallestcolumn);
        });
    });

У меня четыре вкладки в меню. В первых трех по одной строчке, в четвёртой строк десять (чисто для проверки). В правом сайдбаре (который ровняю) тоже одна строка и теже margin и padding что и в первых трех вкладках. Загружается с первой вкладкой, но при клике на первые три вкладке высота сайдбара резко уменьшается, так что аж контент выходит за бордюр. А вот при клике на четвертой вкладке (там где контента больше) все ровно!

Я извиняюсь, как уже говорил, сам не силен, поэтому переделываю чужое. Сразу не заметил много лишних переменных. Вот:

$("#tabs li a").each(function (i) {
		$("#tabs li a:eq("+i+")").click(function(){
            var tab_id=i+1;
            var currentHeight = $("#tab"+tab_id).height();
        $("#rBar").height(currentHeight);
        });
});

После обновления страницы содержимое всех вкладок отображается вместе, после перехода по вкладкам они раскладываются по своим местам.

В чем причина?

Вит, скорее всего проблема в стилях. Необходим, чтобы первоначально вкладки были скрыты, для этого нужно прописать в стилях #content div { display:none; } . Посмотрите вот этот CSS из примера: http://web4develop.ru/wp-content/uploads/2010/08/tabs2/style.css

Спасибо, помогло

Но появилась ещё одна проблемка.

Хочу в вкладки вставить комменты Фейсбук и Вконтакте. До Контакта ещё не дошёл, но с фесбуком уже проблема. Не хочет отображаться. Вне вкладки работает.

Может знаете с чем это связано? Если не по теме, то извиняюсь.

Вот код комментов Фейсбука:

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Убрал CSS, все красота исчезла, но загрузились комменты, после перехода по вкладкам и обратно исчезли.

Чувствую придётся без вкладок поставить чьи-нить одни комменты.

Вит, всё дело в CSS, а именно в #content div { display:none; } — эта строчка назначает display:none; всем div’ам внутри #content. Задайте какой-нибудь класс для этих дивов-вкладок, например

div class="tab"

и измените свой CSS на #content div.tab { display:none; }.

Примеры из статьи — это всего лишь примеры, не стоит все классы один-в-один называть также.

Спасибо за статью, если б не “любимый” IE в режиме совместимости…..

Сергей, чтобы не включался режим совместимости в IE пропишите DOCTYPE на странице.

UPD: Только что проверил на кроссбраузерность примера в IE7, IE8, IE9 — всё норм. =)