Универсальный jQuery-скрипт для блоков с вкладками (табами)

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Содержание: Вступление Код jQuery-скрипта для переключаемых блоков с вкладками Добавлено 07.03.2010 (обновлено 09.04.2015) Скачать Универсальный jQuery-скрипт для блоков с вкладками HTML-код, который нужно использовать для скрипта Обязательные CSS-стили для вышеуказанного HTML-кода Примеры Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после ...

Полезные комментарии (8)
Комментарии (969)
  1. 1
    Андрей

    Добрый день.
    Во-первых спасибо за вкладочки, оч доступно, понятно и все работает ;)
    Возможно, вопрос не по адресу, но все же. Также как вопросом выше не работает скрипт вывода фоток fancybox внутри вкладки. Есть страница, на ней есть фотки, при нажатии на них выводятся увеличенные фотки. Также на странице есть ваши вкладки, в одну из них я загружаю внешний файл через
    $(document).ready(function(){
    $(‘#test1’).click(function(){
    $.ajax({
    url: «aks.php»,
    cache: false,
    success: function(html){
    $(«#test2»).html(html);
    }
    });
    });
    });
    В этом aks.php также есть фото, если открыть файл в отдельном окне, то они увеличиваются без проблем, а когда пытаешься посмотреть фотки уже в загруженную вкладку, то там скрипт отказывается работать ) Не подскажите, как починить?

  2. 3
    Серней

    Спасибо за вкладки, только возникло 2 вопроса:

    1) как убрать отступ текста, чтобы засунуть в контейнер плагин от соц.сетей?
    2) как вместо текста организовать картинку на закладке?

    Хотелось бы реализовать как на сайте http://echo.msk.ru/blog/

  3. 7
    кира

    андрей
    попробуйте для подгруженой страницы юзать лайв

    $(’#test1′).live(‘click’, function () {

    должно помоч, этот метод вроде переопределяет когда страница уже загружена

  4. 8
    rutulets

    Вопрос не по скрипту вкладок. Меня заинтересовало то, как у тебя на сайте подсвечен синтаксис css и html и т.д. в коде выделенный тегом [code]. Если не секрет подскажи как это сделать? Неужели ты каждое слово и буквы отдельно выделял цветом? Буду очень благодарен если поможешь :)

  5. 10
    Rivolt

    Dimox, а в твоих табах информация грузится вся скопом или только когда открываешь вкладку? Просто если внедрить ajax без кликанья на ссылку для появления контента в табы и таких табов будет неимоверное количество с ajax контентом то что получится? большой бада-бум!

  6. 12
    Cheravto

    Подскажите, пожалуйста, у меня на Ucoze работает почему-то только на двух страницах «Главная» и «Новости» — дальше вкладки перестают двигаться.

  7. 14
    Rivolt

    Смотрите, когда я кликаю по табу, он становится current

    $(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {
    $(this).addClass(‘current’).siblings().removeClass(‘current’)
    .parents(‘body’).find(‘div.box’).hide().eq($(this).index()).;
    })

    А код для загрузки с помощью кнопки «loadhtml» в контейнер feeds из контейнера area такой :

    $(document).ready(function(){ $(«#loadhtml»).click(function(){
    $(«#feeds»).load(«/news/portal/1-0-1 #area»);
    });
    });

    Как, если это возможно, превратить второй код, чтобы он загружал информацию только если таб превращен в current?

  8. 16
    Rivolt

    Я очень плох в скриптах, но неужели нельзя сделать загрузку только по активному табу именно в Вашем примере?

    Я попытался сделать нечто подобное:

    $(document).ready(function(){
    if
    ($(«ul.tabs»).hasClass(«current»); )
    { $(«#feeds»).load(«news/1-0-1 #area»); }
    else
    {$(«#feedss»).load(«pages/demo.html #area»); }
    });

    Но, к сожалению он не работает…кто знает как правильно его написать? И чтобы в else ничего не грузилось или была иконка загрузки.

  9. 18
    Rivolt

    Похожу по форумам, может, подскажут решение.

  10. 19
    Rivolt

    Переделал пример, чтобы наглядней было (в табе «новости» загрузка из страницы demo.html контейнера «areaa» в контейнер «feedss»)
    но опять же, любая информация загрузится во всех табах одновременно, а не только в активном табе…http://narod.ru/disk/26384649001/%D1%82%D0%B0%D0%B1%D1%8B%20%D1%81%20ajax.rar.html

  11. 20
    alex

    Спасибо установил всё работает очень компактно что ну очень радует!!! Я подключил через этот скрипты внешние php файлы пару минут протестировал вроде бы всё пока отлично работает буду советовать этот скрипт остальным!!

  12. 21
    Greg

    Ребята немогли бы вы объяснить, не совсем еще опытному блогеру, в какие именно файлы темы вписывать эти коды которые в шапке. Я тут методом тыка, переборобовал много методов.. но что то несходится у меня. постоянно вылетает эта ошибка :
    Parse error: syntax error, unexpected ‘$’, expecting ‘&’ or T_VARIABLE in D:my_projectsblog.localwwwwp-contentthemesfervens-aferevens-afunctions.php on line 289
    Может это потому что я на локальном сервере работаю ?

  13. 23
    Sergei

    Ранее писалось, что из-за
    * {margin: 0; padding: 0;}
    едет весь дизайн сайта, когда внедряешь код. А без этой строчки «пляшут» вкладки. Странно даже, как это вебмастера внедряют и у них ничего не съезжает…
    Пришлось прочитать весь блог, в начале блога давалось неправильная информация что надо вставить
    ul.tabs и li.tabs вместо * {margin: 0; padding: 0;}
    Правильно вставить это:
    ul.tabs {margin: 0; padding: 0;}
    и тогда всё нормально. Dimox — добавьте это в хелп, чтобы не тратить зря время.
    На мой взляд это существенно, так как в противном случае внедрить в какой-нибудь сайт на CMS нельзя.

  14. 24

    Скрипт хорош и кода минимум. Единственный недостаток — это то, что Вы не используете хеш ссылок для вкладок. Т.е. нельзя введя в адресной строке определнную хеш ссылку, сразу перейти на нужную вкладку. А так все классно!

  15. 26

    Это полезно, когда например в табах есть формы для отправки данных. И допустим мы с какой-то вкладки отправляем данные на сервер для обработки, но там возникли ошибки, которые нужно вывести пользователю. В вашем случае страница перегрузится и вкладка собьется! А если бы были хеш ссылки, то можно было бы сразу вывести нужную вкладку.

  16. 27
    Сергей

    Подскажите пожалуйста в чем у меня проблема =( Не корректное отображение происхождит вкладок — назад одной на другую…

  17. 33

    класс!
    большущее спасибо :)

    установила себе — радует очень :)

  18. 34
    Александр

    Добрый день Dimox. Спасибо за превосходный скрипт.Пригодится в разработке сайта. У меня вопрос может быть не по теме. Dimox мне очень понравилось как у Вас происходит процесс «Цитирования» комментариев при выделении текста. Не подскажите это с помощью плагина происходит или Ваша собственная разработка? Заранее спасибо.

  19. 36
    Александр

    А Вы не против если я у Вас этот скрипт позаимствую???

      • 38
        Александр

        Dimox спасибо за скрипт. Попробовал сделать у себя на тестовом сайте. Получились заморочки по поводу вывода всплывающего окна. Не знаю с помощью какой функции выводить окно. Пришлось сделать ссылку «Цитировать» в комментариях. Нажимаешь «Цитировать», а затем выделяю текст окно появляется и выделенный текст добавляется в форму ответа. Вызываю с помощью вот этого

        <a href="#" onclick="bquote(''); return false">цитировать</a>

        . Может быть подскажите как правильно сделать. За ранее благодарен.

  20. 39
    Алиша

    А можно ли как-нибудь меню вертикальное сделать с правой стороны?

  1. 1

    Видимо, это косяк Файерфокса. А по поводу Вконтакте вот тут описывал решение.

  2. 2
    evgen

    путем нехитрых манипуляций делаем Ваш скрипт еще более универсальным

    (function($) {
    	$(function() {
    
    		$('ul.tabs').delegate('li:not(.current)', 'click', function() {
    			$(this).addClass('current').siblings().removeClass('current')
    				.parents('div.section').eq(0).find('>div.box').hide().eq($(this).index()).show();
    			return false;
    		})
    
    	})
    })(jQuery)
    
    <div class="section">
    
    	<ul class="tabs">
    		<li class="current">Первая вкладка</li>
    		<li>Вторая вкладка</li>
    		<li>Третья вкладка</li>
    		<li>Червертая вкладка</li>
    	</ul>
    
    	<div class="box visible">
    	<!-- Inner Tabs -->
    		<div class="section">
    			<ul class="tabs">
    				<li class="current">inner 1</li>
    				<li>inner 2</li>
    			</ul>
    			<div class="box visible">
    				<h2>inner 1</h2>
    				<p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    			</div>
    			<div class="box">
    				<h2>inner 2</h2>
    				<p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    			</div>
    		</div>
    	<!--End Inner Tabs-->
    		<h2>1</h2>
    		<p> Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
    	</div>
    
    	<div class="box">
    		<h2>2</h2>
    		<p> Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
    		<p>Априори, закон внешнего мира принимает во внимание естественный гедонизм, ломая рамки привычных представлений. Концепция реально творит гедонизм, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
    		<p>Созерцание осмысляет трансцендентальный бабувизм, хотя в официозе принято обратное. Бабувизм абстрактен. Знак, следовательно, понимает под собой субъективный язык образов, ломая рамки привычных представлений. Деонтология непредвзято подчеркивает даосизм, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
    	</div>
    
    	<div class="box">
    		<h2>3</h2>
    		<p>Структурализм, как следует из вышесказанного, заполняет из ряда вон выходящий дуализм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Суждение осмысляет интеллект, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире.</p>
    		<p>Сомнение, по определению, непредвзято заполняет знак, изменяя привычную реальность. Современная ситуация, следовательно, подрывает трагический смысл жизни, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Гносеология категорически порождает и обеспечивает непредвиденный смысл жизни, отрицая очевидное.</p>
    	</div>
    
    	<div class="box">
    		<h2>4</h2>
    		<p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
    		<p>Даосизм, по определению, создает здравый смысл, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Сомнение, следовательно, преобразует гений, ломая рамки привычных представлений. Сомнение трогательно наивно.</p>
    		<p>Жизнь откровенна. Предмет деятельности, как следует из вышесказанного, абстрактен. Искусство, как следует из вышесказанного, нетривиально. Гетерономная этика непредвзято понимает под собой смысл жизни, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
    		<p>Здравый смысл, как принято считать, творит бабувизм, отрицая очевидное. Суждение, следовательно, амбивалентно. Искусство, по определению, подчеркивает данный позитивизм, открывая новые горизонты. Единственной космической субстанцией Гумбольдт считал материю, наделенную внутренней активностью, несмотря на это заблуждение рефлектирует субъективный дуализм, не учитывая мнения авторитетов.</p>
    	</div>
    
    </div>
    

    теперь можно создавать вложенные табы

  3. 3
    ITech

    Ура! Решил у себя проблему с перепрыгиванием в начало страницы при переключении табов! Вот живой пример: http://injoit.com/what-we-do/

    Реализовал твой код, Dimox, на своем сайте с небольшими изменениями. Вся загвоздка в том, что все div.box необходимо обтянуть еще одним div и для него определить фиксированную высоту!

    Так как у меня контент в табах на сайте постоянно меняется, подключил механизм Math.max.apply для расчета максимально возможной высоты вложенного дива .box. Эту высоту и задавал внешнему диву..

    Для эффекта появления использовал вместо show() animate() с указанием четких параметров:

    (function($) {
    $(function() {
    
    	$('ul.tabs').delegate('li:not(.current)', 'click', function() {
    		$(this).addClass('current').siblings().removeClass('current')
    		.parents('div.section').find('div.box').hide().eq($(this).index()).animate({height: 'auto', width: 'auto', opacity: 'show'}, 'slow');
    	})
    
    /*--Определение максимальной высоты для блока-контейнера .box-wrap--*/
    	Array.max = function(array) {
     return Math.max.apply(Math,array);
     };
    	var heights = $('.box-wrap div.box').map(function() {
     return $(this).innerHeight();
     }).get();
    	$(".box-wrap").height(Array.max(heights));
    /*--------*/
    
    })
    })(jQuery)
    

    И собственно HTML:

    <div class="section vertical">
    <ul class="tabs">
    	<li class="current"><span>Mobile</span></li>
    	<li><span>Social and Web</span></li>
    	<li><span>Cloud</span></li>
    </ul>
    <div class="box-wrap">
    <div class="box visible">
    ---
    </div>
    <div class="box">
    ---
    </div>
    <div class="box">
    ---
    </div>
    </div>
    </div>
    

    Не знаю, правильно я сделал или нет, но главное ведь, что оно работает) Буду рад услышать твои комментарии по данному поводу.

  4. 4

    По теме перепрыгивания вверх при переключении табов.
    В комментариях выше был модифицированный скрипт с определением высоты родительского блока, но если например в табы положить меню-аккордеон (оно там прекрасно работает), то при задании фона табам аккордеон будет вылазить за их пределы.
    И так как вся соль заключается в установке определённой высоты блоку-родителю, можно поступить проще:
    Мне лично помогла установка min-height для родительского блока табов.

    .section {
    	min-height: 1px;
    	}

    проверял в ie7> и нормальных браузерах — вроде бы работает.

  5. 5
    maqsim

    Вместо:
    $(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {

    Поставьте:
    $(‘ul.tabs li:not(.current)’).live(‘click’, function() {

    Проблема первого элемента в том, что некорректно связываются события через метод delegate, когда разметка с вкладками подгружена через ajax. Второй вариант работает отлично + мы делаем 1 раз выборку, а не 2

  6. 6
    Metaller

    Проблема прыгающей страницы при переключении табов в том, что в момент переключения сначала прячется содержимое всех табов, а потом показывается содержимое активного таба. В момент, когда содержимое всех табов спрятано — контента на странице становится меньше и браузер прокручивает страницу вверх. Когда новый таб появляется — скрол остается на той же странице.

    Решение — не прятать все табы, а только ненужные:

    .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings().hide();
    
  7. 7

    Если кому интересно — ещё одно простое решение для перехода к нужному табу по клику на стороннем элементе.

    $('[data-tab-target]').click(function(e) {
    		$("html, body").animate({scrollTop:$('#'+$(this).data('tab-target')).offset().top-50}, 500); //прокручиваем страницу чуть выше положения цели
    		$('#'+$(this).data('tab-target')).trigger('click');
    		return false;
    	});
    <span data-tab-target="tab-2">перейти к табу #tab-2</span>

    у

    <div class="section">
     <ul class="tabs">
     <li class="current">1-я вкладка</li>
     <li id="tab-2">2-я вкладка</li>
     </ul>
     <div class="box visible">
     Содержимое первого блока
     </div>
     <div class="box">
     Содержимое второго блока
     </div>
    </div><!-- .section -->
  8. 8

    Вот код, который это делает (доработан 4-й пример):

    (function($) {
    $(function() {
    
    	$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    		$(this)
    			.addClass('active').siblings().removeClass('active')
    			.closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
    	});
    
    	var tabIndex = window.location.hash.replace('#tab','')-1;
    	if (tabIndex != -1) {
    		$('ul.tabs__caption li').eq(tabIndex).click();
    		$('html, body').animate({scrollTop: $('div.tabs__content').eq(tabIndex).offset().top - 50}, 700);
    	}
    
    	$('a[href*=#tab]').click(function() {
    		var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1;
    		$('ul.tabs__caption li').eq(tabIndex).click();
    		$('html, body').animate({scrollTop: $('div.tabs__content').eq(tabIndex).offset().top - 50}, 700);
    	});
    
    });
    })(jQuery);

    Число 50 (в двух местах) — это отступ между блоком и верхней границей окна браузера после прокрутки к блоку. 700 — это скорость прокрутки, в данном случае 0,7 секунды.

Ваш комментарий