Главная JavaScript

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

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

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

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

  1. Здравствуйте! Подскажите, пожалуйста, как решить проблему?
    Поставила скрипт из первого примера. Все работает. Далее подключаю скрипт с небольшой анимацией. Анимация работает, а табы нет. Как решить конфликт?

    Подключаю так:

    Скрипт с анимацией должен быть в первом табе, выглядит так:
    $(function (){
    $(«.img1,.txt1,.img2,.txt2,.img3,.txt3,ul»).hide ();
    $(«.img1″).delay (800).fadeIn (800);
    $(„.txt1″).delay (800).fadeIn (500).animate ({fontSize:"42px"},"slow“).animate ({fontSize:"34px"},"slow»);
    $(«.img2,.txt2»).hide ();
    $(«.img2″).delay (2500).fadeIn (800); $(„.txt2″).delay (2400).fadeIn (500).animate ({fontSize:"42px"},"slow“).animate ({fontSize:"34px"},"slow»);
    $(«.img3,.txt3»).hide ();
    $(«.img3″).delay (3900).fadeIn (800); $(„.txt3″).delay (3800).fadeIn (500).animate ({fontSize:"42px"},"slow“).animate ({fontSize:"34px"},"slow»);

    $(«.txt1»).click (function (){
    $(«.garanty»).toggle (10);
    });
    $(«.txt2»).click (function (){
    $(«.servis»).toggle (10);
    });
    $(«.txt3»).click (function (){
    $(«.sroki»).toggle (10);
    });
    })(jQuery)

    Не сильна в js, поэтому извините, если вопрос дурацкий

  2. Здравствуйте!
    Странное дело, на одном блоге скрипт прекрасно работает, а на другом никак не хочет.
    У меня имеется догадка, что дело в конфликте скрипта с функцией постраничной навигации, где также используется класс «current».
    Скажите пожалуйста, может ли вообще такой конфликт иметь место или это нереально?
    И второй вопрос. Есть ли в wordpress альтернатива классу «current»?

  3. Щикарный скрипт! подходит для любой задачи, а главное без лишнего мусора. Автор, низкий поклон тебе.

  4. Добрый день отличный скрипт спасший мне кучу времени! Такой вопросик возможно ли расположение кнопок переключения табов на месте в блоках. Содержанием блоков будут картинки которые меняются а поверх картинок на заданом месте висят кнопки. Заранее спасибо!

  5. Честный ответ! :) спасибше!

  6. Подскажите пожалуйста, а как сделать чтобы переход между вкладками осуществлялся при нажатии на кнопку!

  7. Круто, спасибо то что искал, и без UI !!!

  8. Здравствуйте! Огромное спасибо! Но немного не универсален тем, что на разных страницах сохраняется одно и тоже значение, и в итоге на разных страницах выводится вкладка под тем номером, под которым сохранено на какой-то одной. Не подскажите как решить проблему?

  9. Добрый день

    столкнулся с не совсем стандартной проблемой:

    у меня там со скрол баром, стандартный он явно не вписывается в таб, при попытке его изменить с помощью различных jq плагинов вот один из них (http://habrahabr.ru/company/2gis/blog/169 359/) активный таб загружается корректно, но при переключении просто ничего не подгружает, обновляешь страницу- все повторяется, можно ли сделать чтоб при переключении таба подгружался и плагин меняющий скролл бар?

  10. Виктория
    10 лет назад

    Добрый день! спасибо большое за рекомендации! а Вы могли бы, как для новичка, подсказать между какими символами общего html-кода блога вставлять рекомендованные скрипты. помогите пожалуйста!

  11. Виктория
    10 лет назад

    а можно подключить этот скрипт через встроенный способ?

  12. походу автор сам не але, совсем, смотрю ответы — не чем не могу помочь, не знаю итд итп, отвечает на самое банальное. Походу скрипт слямзал откуда-то

  13. задал простенький вопрос, для тех кто в js шарит расплюнуть, он — не чем не могу помоч, походу сам не знает.

  14. Как сделать так, чтобы по клику на кнопку активного таба он закрывался обратно?

    • Решил задачу добавлением такого кода, но сомневаюсь, что это лаконичный и правильный путь

        
        $('ul.tabs').on('click', 'li.current', function() {  
          $(this).removeClass('current').parents('div.section').find('div.box').eq($(this).index()).fadeOut(150);  
        }); 
      
  15. Здравствуйте!
    Подскажите пожалуйста, а можно ли сделать табы внутри табов?
    Т. е. к примеру, внутри горизонтальных табов сделать вертикальные табы?
    Заранее благодарен за помощь.

  16. Спасибо за скрипт, юзаю на своих проектах.
    Подскажи что необходимо дописать/подправить в js что бы при нажатии на второй таб, информация выводилась сразу по двум табам? тоесть сделать 2 таба активными, а что бы деактивировать, необходимо еще раз нажать на соответствующий таб. и так к примеру вывести информацию только по нужным табам?

  17. вариант с куками не работают в гугл хром, если подключен jquery-1.11.0. Есть решение?

  18. Спасибо за материал! Весьма полезен, реализовано минимально и с толком, ресурсы в норме, а это главное!

  19. <script type="text/JavaScript" src="../js/tabs.js"></script>
    		<script type="text/JavaScript" src="../js/jquery-2.1.1.min.js"></script>
    		<div class="comments">
    			<ul class="tabs">
    				<li class="current">Сайт</li>
    				<li>Вконтакте</li>
    				<li>Фейсбук</li>
    			</ul>
    			<div class="box visible">
    				1 блок
    			</div>
    			<div class="box">
    				2 блок
    			</div>
    			<div class="box">
    				3 блок
    			</div>
    		</div>
    
    (function($) {
    $(function() {
    
    	$('ul.tabs').each(function(i) {
    		var storage = localStorage.getItem('tab'+i);
    		if(storage) $(this).find('li').eq(storage).addClass('current').siblings().removeClass('current')
    			.parents('div.comments').find('div.box').hide().eq(storage).show();
    	});
    
    	$('ul.tabs').on('click', 'li:not(.current)', function() {
    		$(this).addClass('current').siblings().removeClass('current')
    			.parents('div.comments').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
    		var ulIndex = $('ul.tabs').index($(this).parents('ul.tabs'));
    		localStorage.removeItem('tab'+ulIndex);
    		localStorage.setItem('tab'+ulIndex, $(this).index());
    	});
    
    });
    })(jQuery)
    

    Здравствуйте, подскажите, в чем ошибка (использовал 3 вариант скрипта): изменил в JS названия блоков, CSS почти не менял, но ничего не работает

  20. Переместил вкладки вниз. Работает, но сделать бы еще переход к началу страницы, т. е. иначе где-то по середине страницы открывается вкладка, если текста мало.

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