TabbedContent / Улучшение / Плагины Bootstrap

Версия: v1.7.0

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS

Язык: Английский

Вес файла: 28.7 Kb

Уникальный ID: 5020

Посмотрели: 601 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 12 раз

Прокомментировали: 0 раз

Рейтинг: 3.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/elboletaire/tabbedcontent

Информация: Пользователям

Информация: Правообладателям

Теги: табы, TabbedContent, таб, Tab, вкладки, Plugin, tabs, bootstrap 3

Поделился: BootstrapТема

Добавлено: 2021-12-17 в 15:35

Метка: 1639744522

⇄ ⇅

<div class="container">
 <ul class="nav nav-tabs">
 <li><a href="#tab-1">Tab 1</a></li>
 <li><a href="#tab-2">Tab 2</a></li>
 <li><a href="#tab-3">Tab 3</a></li>
 <li><a href="#tab-n">Tab N</a></li>
 <li class="pull-right controls">
 <ul class="nav nav-tabs">
 <li><a href="#prev">&lsaquo; Prev</a></li>
 <li><a href="#next">Next &rsaquo;</a></li>
 </ul>
 </li>
 </ul>
 <div class="tabscontent">
 <div id="tab-1">
 <p>
 Navigate using the tabs and then try out going backward and forward using the browser's history arrows.
 </p>
 <p>
 <a href="#click-to-switch">Click here to switch to tab using the API</a>
 </p>
 <blockquote>
 <p>
 TabbedContent is a <a href="https://github.com/elboletaire/tabbedcontent">lightweight tabs plugin</a>
 that uses the HTML5 history API to add your tab navigation
 to your browser's history.
 </p>
 <p>
 It is compatible with both jQuery and Zepto.js libraries.
 </p>
 <p>
 It also has an API that will let you switch between tabs externally.
 </p>
 <p>
 Check it out at <a href="https://github.com/elboletaire/tabbedcontent">https://github.com/elboletaire/tabbedcontent</a>.
 </p>
 </blockquote>
 <div class="lorem">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea similique nulla iure eum illo quis nisi velit incidunt veritatis beatae dolorem labore laboriosam optio odio mollitia adipisci fuga culpa.</p>
 <p>Vel perspiciatis voluptatum libero iure natus dicta illum accusamus nobis quas quidem voluptatem magnam. Et amet rem tempore laborum provident sequi nostrum! Nobis tenetur tempore delectus sunt at atque temporibus.</p>
 <p>Tempora voluptas odit illo aliquam dicta commodi repellat modi laborum quis repellendus cupiditate ex ratione fuga expedita rerum ipsum amet optio iste accusamus officia! Recusandae expedita repellat voluptates ullam quis.</p>
 </div>
 </div>
 <div id="tab-2" class="lorem">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor sit tempora animi ad facere ea inventore repellat cupiditate dicta ducimus veniam sint mollitia facilis odit doloremque eos consectetur magni temporibus!</p>
 <p>Cum temporibus enim debitis sapiente optio illo culpa ratione similique magnam eligendi assumenda asperiores molestias vel! Laudantium nostrum incidunt excepturi. Nisi quisquam tempora laudantium accusamus expedita provident sapiente consequuntur magnam?</p>
 <p>Quisquam totam iste eius reprehenderit earum perferendis minus sit est omnis tempore modi delectus ut beatae rerum ad. Alias laborum quas unde quia et illum reiciendis nihil ab voluptate dolorem.</p>
 <p>Beatae incidunt cumque tempore sapiente porro nulla natus perferendis repellendus dolorem at quisquam sequi officia! Quae ipsum eius rerum deserunt aspernatur molestiae quos incidunt dolor illo ea laudantium ipsam tempora?</p>
 <p>Saepe facere debitis nam molestiae distinctio temporibus libero autem dignissimos qui repudiandae consequuntur ducimus atque. Sunt ea sit magni voluptatum a ab debitis molestiae dolor saepe quae fugit voluptas quis?</p>
 </div>
 <div id="tab-3" class="lorem">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero odit dolore impedit dolor reprehenderit dignissimos magni praesentium temporibus voluptatum nisi. In possimus commodi similique modi expedita est. Recusandae voluptate dolor?</p>
 <p>Voluptatum in sapiente aut quis nihil fugit quia consequuntur quo doloremque aspernatur! Eius error sequi rerum est earum repellat nemo debitis molestias molestiae fugit dolor suscipit atque. Sequi ad quod.</p>
 <p>Optio consectetur quam numquam architecto a hic suscipit! Vel officia dolore atque minima facilis explicabo quia ullam magnam quis inventore dolor nulla soluta reprehenderit repellendus quibusdam nisi id iusto quam.</p>
 </div>
 <div id="tab-n" class="lorem">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores maxime aperiam natus minima dolor expedita voluptas magnam! Molestiae similique aliquam atque quas error soluta eligendi quaerat eveniet quibusdam minus! Eos.
 </p>
 <p>
 Nobis molestiae odio facere magnam harum vitae est? Necessitatibus illum distinctio amet earum sequi ducimus perspiciatis neque velit culpa rerum aspernatur ipsam ab molestiae expedita quo doloribus atque eos cupiditate.
 </p>
 </div>
 </div>
 </div>

// switch to tab...
 $("a[href='#click-to-switch']").on('click', function(e) {
 var tab = prompt('Tab to switch to (number or id)?');
 if (!tabs.switchTab(tab)) {
 alert('That tab does not exist :\\');
 }
 e.preventDefault();
 });

// Next and prev actions
 $('.controls a').on('click', function(e) {
 var action = $(this).attr('href').replace('#', '');
 tabs[action]();
 e.preventDefault();
 });
 });
 </script>

BootstrapTema

TabbedContent

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0