Управление вкладками в начальной загрузке очень популярно среди разработчиков из -за его простоты и простоты использования. Тем не менее, его стиль относительно холост, как он может добиться более красивого эффекта, основанного на его первоначальной форме? Я рассматривал эту проблему. Кроме того, вкладки в начальной загрузке должны нажать на каждую вкладку для достижения переключения. Можете ли вы использовать jQuery для управления его автоматическим переключением и позволить ему переключаться с одной вкладки на другую через период времени (например, 5 секунд)? Ниже приведен мой процесс реализации, прежде всего, HTML -код детали вкладок:
<div rol = "tabpanel"> <!-Nav Tabs-> <ul rol = "tablest" style = "margin-top: 0px;" id = "doctabs"> <li rol = "presentation"> <a href = "#section_new" aria-controls = "home" rol = "tab" data-toggle = "tab"> Последний </a> <li role = "Presentation"> <a href = "#section_week" aria-controls = "Profile" stuge = "tab-togge data-togge ="/ina in ". rol = "presentation"> <a href = "#section_month" aria-controls = "Сообщения" rol = "tab" data-toggle = "tab"> популярен за 30 дней </a> </ul> <!-Tab Panes-> <div> <div rol = "tabpanel" id = "section_new"> <p>
Содержимое в TAB1
</p> </div> <div rol = "tabpanel" id = "section_week"> <p>
Содержание в TAB2
</p> </div> <div rol = "tabpanel" id = "section_month"> <p>
Контент в TAB3
</p> </div> </div> </div>
Эти коды в основном такие же, как и нативный код в начальной загрузке. Вам не нужно вносить слишком много изменений, просто заполните свои собственные данные.
Давайте установим стили вкладок. Эти стили будут перезаписать оригинальные стили в начальной загрузке, чтобы достичь эффекта украшения вкладок.
<style type = "text/css">. tab .nav-tabs {border-bottom: 0 none; фон: #eaeaea;}. Таб. li.active ai {border: 0 none; фон: #e67e22; color: #fff;}. Tab .nav-tabs .nav-tabs li.active a: After {content: ""; положение: абсолютное; слева: 45%; внизу: -14px; граница: 7px solid pressparent; border-top: 7px solid #e67e22; 5px; Color: #5a5c5d; размер Font: 14px; Line-Height: 20px; Margin-top: 5px; Border-Bottom: 1px Solid #e67e22;}@СМИ ТОЛЬКО ЭКСЕР И (MAX-WIDTH: 480PX) {.TAB .NAV-TABS, .TAB. .nav-tabs li. Нет;}} </style>После того, как эффект выходит, похоже, это:
Это лучше, чем оригинальный стиль начальной загрузки (но у каждого есть свои предпочтения. Вот просто введение в процесс реализации. Конечно, вы также можете сделать другие стили, изменяя CSS)
Давайте посмотрим, как реализовать автоматическое переключение вкладок. Без лишних слов просто введите код:
// Вкладки автоматического поворота Таймер (i) {interval = setInterval (function () {$ ("#doctabs li: eq ("+i+") a"). Tab ('show'); i ++; if (i> 2) i = 0;}, 5000); return arqual;} $ (var i = 0; hovers в области списка. mouseover (function () {clearInterval (интервал);}); // продолжить вращение $ (".Выше выше - это благоустройство и улучшение управления вкладками в начальной загрузке, представленное вам редактором (рекомендуется). Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!