Табы без плагинов
1. Открываем файл, в который будут добавляться табы (как правило, это single.php или sidebar.php) и вставляем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<dl class="tabs"> <dt class="selected">Таб1</dt> <dd class="selected"> <div class="tab-content">содержимое первого таба</div> </dd> <dt>Таб2</dt> <dd> <div class="tab-content">содержимое второго таба</div> </dd> <dt>Таб3</dt> <dd> <div class="tab-content">содержимое третьего таба </div> </dd> </dl> |
3. Все вкладки и их содержимое — в одной таблице. Для визуально приятного их оформления нужно добавить и настроить под свой стиль код ниже:
|
1 2 3 4 5 6 7 |
.tabs { width:260px; overflow:hidden; margin:0; zoom:1; padding:1px ;position:relative; } .tabs dt { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFF; text-shadow: 1px 1px 1px #333; z-index: 2; position: relative; background: #B80000; float:left; line-height:2; height:2em; background: #B80000; border-bottom:0; padding:0 1em; position:relative; margin-right:0px; cursor:pointer; } .tabs dt:hover { background-color:#ccc; } .tabs dt.selected { border-color:#aaa; background:#B33519; z-index:3; cursor:auto;} .tabs dd { background:#fff; display:none; float:right; width:100%; margin:2em 0 0 -100%; position:relative; z-index:2; } .tabs dd.selected { display:block; } .tabs .tab-content { background:#fff; border:0px solid #ccc; padding:5px 5px 5px 5px; } |
Настройте под себя ширину (здесь 260), фон, цвет шрифтов, рамку. В общем, нужно будет подогнать оформление под общий стиль вашего сайта.
3. Для того, чтобы активировать табы и автоматически выделить первую вкладку, необходимо подключить java-скрипт, добавив его в header.php. Код:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(function(){ $('dl.tabs dt').click(function(){ $(this) .siblings().removeClass('selected').end() .next('dd').andSelf().addClass('selected'); }); }); </script> |
Табы в таблице — наиболее простой способ использования табов, а небольшой скрипт в хидере автоматически выделяет первый из них. Работает быстро и без тормозов и глюков.
Связанные посты:
Метки: Табы