Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью "Универсальный jQuery-скрипт для блоков с вкладками (табами)". * * * Примерно последние месяц-два на англоязычных блогах мне стали попадаться на глаза блоки в сайдбаре, переключаемые с помощью вкладок-табуляторов, которые, судя по всему, становятся ...
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе. Вариант на JavaScript Можно посмотреть готовый ...
Содержание: Вступление Код jQuery-скрипта для переключаемых блоков с вкладками Добавлено 07.03.2010 (обновлено 09.04.2015) Скачать Универсальный jQuery-скрипт для блоков с вкладками HTML-код, который нужно использовать для скрипта Обязательные CSS-стили для вышеуказанного HTML-кода Примеры ...
Данный скрипт — это усовершенствованная версия JS-скрипта «Добавить в закладки», который я представил читателям более года назад. Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его «добить». Скрипт уже давно ...
Сегодня предлагаю вам второй вариант моего скрипта для предпросмотра комментария. Смотрим готовый пример. Скрипт находится в исходном коде данного примера. Прошу обратить внимание, что для полноценной настройки скрипта под ваш сайт, ...
Комментарии (50)
*preventDefault ();
;)
А у меня вот глюк! Работаю с системой Битрикс. Понять не могу где косякнул, 8 раз код пересмотрел, понял что в css, а как избавится не знаю. Может есть кто помочь может?
Rust, если ещё актуально — у меня тоже «Битрикс». Всё работает. В чём глюк?
А я, извините, не понял как подсоединить к каждому табу определенные виджет, работаю на WordPress, напишите доступно пожаллста.
Все, у меня получилось, спасибо, разобрался. Расту:-)
А кто-нибудь знает как индексируется данный трюк? по первой таблице или в общем?
Текст индексируется во всех вкладках.
хм, так и не понял куда подключать 4 шаг? И как?
Как подключить разобрался ^^ Только есть проблема. Работаю с форумом vbulletin. И в нем когда я вставляю скрипт из 4 пункта, корячит весь шаблон, т. е у меня на главной 3 столбца с инфой, а при подключении сего скрипта все уходит в 1 колонку.
Покажите пример.
А динамически можно создавать вкладки как на http://i.pr-cy.ru/panel.php
В этом скрипте — нет.
подскажите как добавить еще один элемент, например ссылку или кнопку при нажатии которой открывалась бы предположим третья вкладка?
$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');
});
Супер!!!
Огромное спасибо за метод)
А как сделать ссылку например на вторую вкладку?
Если имеете в виду сделать по умолчанию активной вторую вкладку, тогда из
<li class="t1 tab-current">нужно перенестиtab-currentв тег второй вкладки, ну и вместоdiv.t2 {display: none}сделатьdiv.t1 {display: none}.Спасибо за ответ.
Нет, по умолчанию я хочу первую вкладку. Но на другой странице сайта необходимо сделать ссылку на вторую вкладку.
1) на страницу, где по умолчанию открывается первая вкладка
2) на эту же страницу где откроется вторая вкладка.
Пока писал понял :)
Можно передать условие и применить стиль где будет. Так?
Мне непонятно, что вы хотите сделать.
сделал на странице четыре разных блока с вкладками, все отлично работает…
делаю пятый и он не работает, при открытии страницы открывается первая вкладка, но при нажатии на нее или на вторую все пропадает, получается отрабатывает:
$('div.tm1').hide ();
$('div.tm2').hide ();
и не отрабатывает:
$('div.' + thisClass).show ();
но на четырех других работает… код одинаковый…
Покажите пример, без него ничего не смогу подсказать.
это работает:
ЗападВосток
бла-бла
бла-бла
$('ul.tabs.tabs3 li').click (function (){
var thisClass = this.className.slice (0,2);
$('div.t5').hide ();
$('div.t6').hide ();
$('div.' + thisClass).show ();
$('ul.tabs.tabs3 li').removeClass ('tab-current');
$(this).addClass ('tab-current');
});
это не работает:
ЗападВосток
бла-бла
бла-бла
$('ul.tabs.tabsm li').click (function (){
var thisClass = this.className.slice (0,2);
$('div.tm1').hide ();
$('div.tm2').hide ();
$('div.' + thisClass).show ();
$('ul.tabs.tabsm li').removeClass ('tab-current');
$(this).addClass ('tab-current');
});
В
slice (0,2)замените 2 на 3.спасибо!!!
а можно как-нибудь сделать так чтоб вкладки были с боку?
C помощью CSS их можно как угодно расположить.
не знаток HTML, а CSS тем более :(
ок.
просто не знаток HTML, а CSS тем более :(
Такая шляпа:
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!
А дай, думаю, воспользуюсь советом № 44 — так ведь помогло!
В двух словах, если можно, поясните: что произошло?