Пример
Контент для вкладки 1
Контент для вкладки 2
В которой больше текста
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Контент для вкладки 3
Контент для вкладки 4
HTML
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="tabs"> <ul> <li><a href="#tabs-1">Вкладка 1</a></li> <li><a href="#tabs-2">Вкладка 2</a></li> <li><a href="#tabs-3">Вкладка 3</a></li> </ul> <div id="tabs_container"> <div class="tab_block" id="tabs-1">Контент для вкладки 1</div> <div class="tab_block" id="tabs-2">Контент для вкладки 2</div> <div class="tab_block" id="tabs-3">Контент для вкладки 3</div> </div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
#tabs { margin: 20px 0; } #tabs ul { display: flex; flex-wrap: wrap; list-style: none; margin: 2px; } #tabs li { margin: 2px; } #tabs li a { display: block; padding: 8px 16px; font-size: 13px; font-family: Verdana, sans-serif; letter-spacing: .2px; font-weight: bold; text-transform: uppercase; background: #BFE2FF; text-decoration: none; color: #337AB7; transition: all 0.2s ease-in-out; } .tabulous_active { background: #337AB7!important; color: #FFF!important; cursor: default; } #tabs li a:hover { background: #337AB7; color: #FFF; } #tabs_container { overflow: hidden; position: relative; border: 2px solid #BFE2FF; background: white; } #tabs_container .tab_block { padding: 20px 30px; } .transition { transition: all .3s ease-in-out; transition-delay: .3s; } .make_transist { transition: all .3s ease-in-out; } .hidescale { transform: scale(0.9); opacity: 0; } .showscale { transform: scale(1); opacity: 1; transition-delay: .3s; } .hideleft { transform: translateX(-100%); opacity: 0; } .showleft { transform: translateX(0px); opacity: 1; transition-delay: .3s; } .hidescaleup { transform: scale(1.1); opacity: 0; } .showscaleup { transform: scale(1); opacity: 1; transition-delay: .3s; } .hideflip { opacity: 0; transform: rotatey(-90deg) scale(1.1); transform-origin: 50% 50%; } .showflip { opacity: 1; transition-delay: .3s; transform: rotatey(0deg) scale(1); transform-origin: 50% 50%; } .tabulousclear { display: block; clear: both; } |
JS
Подключаем библиотеку jQuery и добавляем код плагина:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
/*! * strength.js * Original author: @aaronlumsden * Further changes, comments: @aaronlumsden * Licensed under the MIT license */ ;(function ( $, window, document, undefined ) { var pluginName = "tabulous", defaults = { effect: 'scale' }; function Plugin( element, options ) { this.element = element; this.$elem = $(this.element); this.options = $.extend( {}, defaults, options ); this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype = { init: function() { var links = this.$elem.find('a'); var firstchild = this.$elem.find('li:first-child').find('a'); var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>'); if (this.options.effect == 'scale') { tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hidescale'); } else if (this.options.effect == 'slideLeft') { tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hideleft'); } else if (this.options.effect == 'scaleUp') { tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hidescaleup'); } else if (this.options.effect == 'flip') { tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hideflip'); } var firstdiv = this.$elem.find('#tabs_container'); var firstdivheight = firstdiv.find('.tab_block:first').height() + 40; var alldivs = this.$elem.find('div:first').find('.tab_block'); alldivs.css({'position': 'absolute','top':'0'}); firstdiv.css('height',firstdivheight+'px'); firstchild.addClass('tabulous_active'); links.bind('click', {myOptions: this.options}, function(e) { e.preventDefault(); var $options = e.data.myOptions; var effect = $options.effect; var mythis = $(this); var thisform = mythis.parent().parent().parent(); var thislink = mythis.attr('href'); firstdiv.addClass('transition'); links.removeClass('tabulous_active'); mythis.addClass('tabulous_active'); thisdivwidth = thisform.find('.tab_block'+thislink).height() + 40; if (effect == 'scale') { alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale'); thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showscale'); } else if (effect == 'slideLeft') { alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft'); thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showleft'); } else if (effect == 'scaleUp') { alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup'); thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showscaleup'); } else if (effect == 'flip') { alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip'); thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showflip'); } firstdiv.css('height',thisdivwidth+'px'); }); }, yourOtherFunction: function(el, options) { // some logic } }; $.fn[pluginName] = function ( options ) { return this.each(function () { new Plugin( this, options ); }); }; })( jQuery, window, document ); |
И инициализируем с нужным эффектом:
1 2 3 4 5 |
$(window).on('load resize', function () { $('#tabs').tabulous({ effect: 'scale' }); }); |
Возможные эффекты: scale
, slideLeft
,scaleUp
и flip
Плагин tabulous на github
Здравствуйте.
Допустим вместо "Контент для вкладки 1" вставляем js рекламы по тематикам.
Но не грузит.
Подскажите, как-нибудь можно решить проблему?
С уважением Вячеслав.
Обновил все коды в теме, попробуйте.
Здравствуйте. Без изменений. Все работает, но вкладка не раскрыта, пока не нажмем.
Скрин кода и итоговый вывод при заходе на сайт приложил.
С уважением, Вячеслав.
Не могу понять, что сделал не так.
При попытке нажать по табам - перекидывает на главную :((
Правда в консоле есть ошибка - Uncaught ReferenceError: jQuery is not defined
at tabulous.js:113
Не могу понять, как решить....
Судя по ошибке jQuery не определена.
А на главную перекидывать не должно, проверьте урл, слеш не стоит вначале?
Привет. Ребята, подскажите плиз как прописать правильно конструкцию?
И инициализируем с нужным эффектом:
Текст наложился друг на друга в первом табе.
Вначале JQuery, потом код плагина, потом эта конструкция.
А табы переключаются? Если да, то скорее всего что-то со стилями.
Да, табы переключаются. В стилях не менял ничего, все с вашего примера.
ссылка. Можете подсказать что не так? Пожалуйста.
Это у меня ошибка в коде была...
Спасибо что обратили внимание. Исправил.
Нужно:
Это вам спасибо 🙂