Вкладка (вкладка (вкладка). Объединив некоторые свойства данных, вы можете легко создать интерфейс вкладки.
«Если вы хотите ссылаться на функциональность плагина отдельно, вам необходимо ссылаться на Tab.js. или, как упомянуто в главе обзора плагина Bootstrap, вы можете ссылаться на Bootstrap.js или сжатые версии Bootstrap.min.js».
1. Использование
Вы можете включить страницы вкладок двумя способами:
Свойством данных: вам необходимо добавить Data-toggle = "tab" или data-toggle = "pill" в текстовую ссылку якоря.
Добавление классов NAV и NAV-Tabs в UL будет применять стиль BootStrap Tag, добавив классы NAV и NAV-Pills в UL, применяет стиль капсулы Bootstrap.
<ul> <li> <a href = "#eDupifier" data-toggle = "tab"> home </a> </li> ... </ul>
Через JavaScript: вы можете использовать JavaScript, чтобы включить вкладки следующим образом:
$ ('#mytab a'). Click (e) {e.preventdefault () $ (this) .tab ('show')})Следующий пример демонстрирует активацию отдельных вкладок по -разному:
// Выберите страницу вкладки $ ('#mytab a [href = "#profile"]'). Tab ('show') // Выберите первую вкладок $ ('#mytab a: first'). Tab ('show') // Выберите последнюю страницу вкладок $ ('#mytab a: last'). Tab ('show') // select the teb indexed from 0) $ (## a '). Tab (' show ')2. Fade Effect
Если вам нужно установить эффект затухания для вкладки, добавьте .fade к каждому .tab-Pane. Первая вкладка должна быть добавлена с помощью класса.
<div> <div id = "home"> ... </div> <div id = "svn"> ... </div> <div id = "ios"> ... </div> <div id = "java"> ... </div> </div>
3. Метод
. $ (). Tab: Этот метод активирует элементы вкладки и контейнеры содержимого. Страница вкладок должна использовать цель данных или hREF, указывающий на узел контейнера в DOM.
<ul id = "mytab"> <li> <a href = "#идентификатор" data-toggle = "tab"> home </a> </li> ..... </ul> <div> <div id = "Home"> ... </div> .... </div> <script> $ (function () {$ ('#mytab a: last').IV События
В следующей таблице перечислены события, которые будут использоваться в плагине TAB (TAB). Эти события могут использоваться в качестве крючков в функциях.
5. Основные примеры
1. Метки
Страницы вкладок обычно известны как функции TAB.
// Основное использование <ul> <li> <a href = "#html5" data-toggle = "tab"> html5 </a> </li> <li> <a href = "#bootstrap" data-toggle = "tab"> bootstrap </a> </li> <li> <a href = "#jquery" data-tgle = "> jquery <> jquery </li> <li> <a href = "#extjs" data-toggle = "tab"> extjs </a> </li> </ul> <div style = "padding: 10px;"> <div id = "html5"> ... </div> <div id = "bootstrap"> ... </div> <div = "jquery"> ... </div> <div идентификатор ">" ... ext "> </div> </div>
// Эффект затухания может быть установлен, и в указывается, что предпочтительное содержание отображается по умолчанию <div id = "html5"> // его также можно заменить на капсулу <ul> //
Эффект связывания или не связывания одинаково с целью данных
// Используйте JavaScript и напрямую используйте метод TAB. $ ('#Nav A'). On ('click', function (e) {e.preventDefault (); $ (this) .tab ('show');}); // События, другие сходства $ ('#Nav A'). On ('show.bs.tab', function () {alert ('бесплатно, когда вызовет вкладку!');}); $ ('#Nav A'). On ('shod.bs.tab', function () {alert ('бесплатно при отображении вкладки!');});Эта серия учебных пособий была составлена в: Bootstrap Basic Lutorials Специальные темы, добро пожаловать, чтобы щелкнуть, чтобы учиться.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию таблицы начальной загрузки
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.