Как сделать простые табы в блоге на jQuery

Блоговый движок WordPress

1. Для начала убедитесь, что в блоге подключена библиотека jQuery.
Как подключить jQuery?
Для начала скачиваем библиотеку jQuery с сайта разработчиков.
В большинстве браузеров скачивается файл, название которого выглядит примерно так: jquery-1.4.2.min.js
Однако в некоторых браузерах этот файл не скачивается, а открывается, как обычный текстовый. И это понятно, ведь он и является по сути обычным текстовым файлом.
Если вместо скачивания файл пытается открыться, то в окне, которое показывает содержимое этого файла, скопируйте путь к нему, а потом воспользуйтесь менеджером закачки.

Обычно js-скрипты записываются в специальную папку, которая находится в папке с вашей темой.
При открытии страниц блога в браузере первым делом загружается все, что прописано в файле header.php (находится в папке вашей темы оформления). Вот с этим файлом и будем работать. Откройте его и найдите такие строчки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">

Вот сразу после них нужно вставить указание подгружать библиотеку jQuery:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>

Обратите внимание на эту строчку, особенно на то, что записано в простых скобках внутри src="..." — это путь к библиотеке, которую мы загрузили на сайт. Код автоматически вставляет путь к теме, которую вы используете, а js — это и есть та папка, которая находится в папке вашей темы, и в которую мы закачали файл.
Все, библиотека jQuery подключена.

Как загружать jQuery с сайта Google?
Сделать это достаточно легко — нужно удалить вызов этих скриптов из шаблонов вашей темы (обычно это прописано в header.php или footer.php), и добавить в файл functions.php такой код:

add_action( 'init', 'jquery_register' );
function jquery_register() {
if ( !is_admin() ) {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' ), false, null, true );
    wp_enqueue_script( 'jquery' );
   }
}

Этот код заставит скрипт jquery.min.js грузиться напрямую из хранилища Google.

2. Откройте файл, в котором нужно сделать табы (например, single.php), и вставьте в него такой код:

<ul class="tabs">
    <li><a rel="nofollow" href="#tab1">Таб1</a></li>
    <li><a rel="nofollow" href="#tab2">Таб2</a></li>
    <li><a rel="nofollow" href="#tab3">Таб3</a></li>
</ul>

<div class="tab_container">

    <div id="tab1" class="tab_content">
      Содержимое первого таба
    </div>

    <div id="tab2" class="tab_content">
      Содержимое второго таба
    </div>

    <div id="tab3" class="tab_content">
      Содержимое третьего таба
    </div>

</div>

Как видите, это очень простая структура. Сначала идет список табов, потом — содержимое табов. Для элементов сразу заданы стили. Чтобы придать всему этому красивое, ненавязчивое оформление, нужно описать стили для всех этих элементов.

3. Откройте файл style.css и вставьте в него код, задающий оформление используемых нами элементов.

ul.tabs { margin: 0 0 0 20px; padding: 0; float: left; list-style: none; height: 32px; width: 100%; }
ul.tabs li { float: left;   margin: 0; padding: 0; height: 31px; line-height: 31px; border: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #fff;  }
ul.tabs li a { text-decoration: none; color: #aaa; display: block; font-size: 1.0em; padding: 0 10px; border-bottom:#fff 1px solid; }
ul.tabs li a:hover { background: #fff;color: #000; border-bottom:#fff 1px solid; }
html ul.tabs li.active { background: #fff; border-top-left-radius:5px; border-top-right-radius:5px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; color:#000; border-bottom: #fff 1px solid; }
.tab_container { overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin-bottom:0px; background:#fff; border-top:#eee 1px solid;}
.tab_content { padding:0; }
html ul.tabs li.active a, html ul.tabs li.active a:hover {color:#000;}

В примере оформления для светлых блогов в белым фоном. Вы можете поиграть с этим оформлением, изменив его под дизайн своего блога. Ну и последний шаг — это подключение java-скриптов, чтобы совместить табы, оформление, и сделать красивое переключение между ними.

4. Откройте файл header.php и вставьте в него код скрипта:

<script type="text/javascript">
$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); 
        $(this).addClass("active"); 
        $(".tab_content").hide(); 

        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).fadeIn(); 
        return false;
    });

});
</script>

Этот скрипт переключает табы с затуханием, запоминает активный таб, при загрузке страницы делает активным первый таб.

Второй способ.
Первый способ, был основан на списках, в которых табами служили специальные ссылки. Эти ссылки показывали содержимое табов, оформленное особым образом и активируемое с помощью скрипта. Второй способ, попроще — нет эффектов во время смены содержимого табов, но и нет лишних внутренних ссылок для активации табов.
1. Откройте файл, в котором вы будете делать табы (обычно это single.php илиsidebar.php) и вставьте в него такой код:

<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>

2. Как видите, табы и их содержимое находятся в одной таблице. Чтобы они приобрели нужное оформление, отредактируйте файл style.css, вставив в него код:

.tabs { width:400px; overflow:hidden; margin:0; zoom:1; padding:1px ;position:relative; }
.tabs dt { float:left; line-height:2; height:2em; background:#fff; border:1px solid #ccc; border-bottom:0; padding:0 1em; position:relative; left:35px; margin-right:1px; cursor:pointer; }
.tabs dt:hover { background-color:#ccc; }
.tabs dt.selected { border-color:#aaa; background:#fff; 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:1px solid #ccc; padding:20px 20px 10px 20px; }

В этом примере кода ширина табов равна 400 px, фон белый, цвет шрифтов черный, рамка вокруг табов серая.
3. Чтобы активировать табы и автоматически выделить первый, нужно подключить скрипт. Откройте файл header.php, и вставьте в него такой код:

<script type="text/javascript">
            $(function(){
                $('dl.tabs dt').click(function(){
                    $(this)
                        .siblings().removeClass('selected').end()
                        .next('dd').andSelf().addClass('selected');
                });
            });
        </script>

Табличная верстка упрощает использование табов, делает их более логически правильными, а несложный скрипт отслеживает, чтобы первый таб всегда был активирован при загрузке страницы.