Главная
Web-дизайн Wordpress
Табы или панель вкладок в WordPress без плагинов

Табы или панель вкладок в WordPress без плагинов

Доброго времени суток 🙂
Недавно мне заказали добавить на сайт WordPress табы или панель вкладок, как кому угодно. При нажатии на такой дам, пользователь переключается на на окна не перезагружая страницы. Пример можно посмотреть внизу данной статьи или на странице любого фильма переключая между фильмом и трейлером Здесь. Это должно было осуществиться без подключения плагинов.
И так приступим.

1. Html код

Для начала нужно сделать разметку.

<div id="tabs">
            <ul class="wptab">
                                <li><a href="#tab-one" class="selected" onclick="click(); return false;">Первый таб</a></li>
                                <li><a href="#tab-two" onclick="click(); return false;">Второй таб</a></li>
                                <li><a href="#tab-three" onclick="click(); return false;">Третий таб</a></li>
            </ul>

<div class="clear"></div>
 
<div class="boxes box inside">	            
     <div id="tab-one" class="list" style="display: block;">   
     Содержание первого блока
    </div>
    <div id="tab-two" class="list" style="display: none;"> 
     Содержание второго блока
    </div>
 
    <div id="tab-three" class="list" style="display: none;">
    Содержание третьего блока
    </div>
 
   </div><!-- /.boxes -->
  </div><!-- /tabs -->

2.Подключение Java

В файл footer.php перед закрывающим тегом body добавляем вот этот код:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $(".wptab a").click(function () {   
    $(".wptab a").removeClass("selected");    
    $(this).toggleClass("selected");
    $(".list").attr("style","display: none;");
    $("#tab-category").attr("style","display: block;");   
    var div_name = $(this).attr("href");
    $(div_name).attr("style","display: block;");
    });
  });
</script>

3.Стили CSS

Добавляем стили в наш файл стилей, например style.css

#tabs{overflow:hidden;margin:15px 0 1px;}
#tabs ul.wptab{position:relative;padding:0px;height:50px;}
#tabs ul.wptab li{display: inline;list-style: none;color:#ffffff;cursor:pointer;}
#tabs ul.wptab li:first-child{position: absolute;bottom:0;left:0;}
#tabs ul.wptab li:nth-child(2n){position: absolute;bottom:0;left:140px;}
#tabs ul.wptab li:nth-child(3n){position: absolute;bottom:0;left:280px;}
#tabs ul.wptab li a.selected,
#tabs ul.wptab li a:hover{text-decoration:none;color:#fff;background:#339900;padding:5px 0 10px;-webkit-transition:all linear 0.2s;-moz-transition:all linear 0.2s;-ms-transition:all linear 0.2s;-o-transition: all linear 0.2s;transition:all linear 0.2s;-moz-box-shadow:0 2px 5px rgba(0,0,0,0.3);-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);box-shadow: 0 2px 5px rgba(0,0,0,0.3);}
#tabs ul.wptab li a{width:140px;color: #fff;display:block;float:left;padding:5px 0 6px;font-size:14px;text-decoration:none;text-align:center;background:#222;-webkit-transition:all linear 0.2s;-moz-transition:all linear 0.2s;-ms-transition: all linear 0.2s;-o-transition:all linear 0.2s;transition:all linear 0.2s;}
#tabs .inside ul{margin:0;list-style:none;padding-left:0px;}
#tabs .inside .list{display:none;}
#tabs .inside .list:first-child{display:block;}

Если все сделано правильно, то должно получится так.

Пример

Внутри, вместо текста можете поместить все что угодно.
На этом все. Спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(13 голосов, в среднем: 5 из 5)

Опубликовано 16 комментариев

  • Валерий
    Комментариев: 1

    подскажите, а можно как то так прописать код, что бы организовать табы по принципу как на этом сайте http://www.laboratoires-unisson.com/appareil-auditif/oticon/2634-alta-pro-2-rite.html что бы страница перелистывлась и переходила на новый таб?

    • Виталий
      Комментариев: 269

      Здравствуйте, Валерий. В Вашем примере - это не табы, это просто переход по закладкам. Если вы прокрутите страницу, то заметите, что все закладки уже отмечены зеленым. Самый простой способ закладок, это делать ссылку и и в пути указать сначала решетку, а потом id нужного блока, к которому нужно перейти, например
      <a href="#zakladka1">Закладка1</a>
      Далее прописываем сам блок и задаем ему тот же id
      <div id="zakladka1">Закладка1</div>

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

  • Артем
    Комментариев: 1

    Виталий, здравствуйте. Огромное спасибо за статью, очень помогла. Но, возник вопрос, можно ли сделать, чтобы ссылка на страницу с якорем соответствовала определенному табу? То есть например ссылка site.ru/yslyga1#zakladka1 открывала страницу site.ru/yslyga1, на которой среди трех табов: zakladka1, zakladka2 и zakladka3 был открыт таб #zakladka1? То есть не нужно переходить к разделу zakladka1, а нужно, чтобы посетитель, листая страницу, наткнулся ниже на открытый таб?

    • Виталий
      Комментариев: 269

      Здравствуйте. не совсем пойму что Вы хотите, но это точно не табы. Якоря это просто переход на определенное место в статье. Посмотрите первый комментарий. Человек давал ссылку с примером. Если Вам нужно также, то во втором комментарии я отвечаю как это сделать. Это не табы, а просто стилями оформлено.

      • Дмитрий
        Комментариев: 4

        Виталий, здравствуйте. Статья отличная! Но есть вопрос по вашему табу, допустим я нажал 2 вкладку, в контенте находилась форма(к примеру), выполнил действия и нажал кнопку, соответственно страница обновилась и моя вкладка сбросилась на стартовую (т.е. 1 вкладку)... как мне сохранять активность вкладки после обновления страницы. Хотелось бы это использовать во всех вкладках, свобода действий. Вот)

        • Виталий
          Комментариев: 269

          Поищите табы, которые используют куки. В данных этой функции нет.

          • Дмитрий
            Комментариев: 4

            Понятно, но меня интересовали сами сессии ) Жаль)

            • Виталий
              Комментариев: 269

              не совсем понял Вас. То что Вам нужно, осуществляется только с помощью куков, которые запоминают действия пользователей. Ну или можно попробовать грязный способ, убрать в ссылках табов вот это - return false;
              Тогда у Вас в ссылке страницы будет вконце названия таба и Вы автоматом попадете на нужный таб после перезагрузки страницы.

  • Дмитрий
    Комментариев: 4

    Не спорю, если нажать на вкладку №2 выведется название вкладки в строке, даже после F5 оно будет оставаться, но сам контент (выбранной вкладки) - нет)

    т.е. после F5 Название вкладки №2 останется в строке, но будет с контентом от вкладки №1.

  • Андрей
    Комментариев: 2

    Долго искал такие простые вкладки для переключения видео - нашел!
    Работает отлично!
    Спасибо вам!

  • Андрей
    Комментариев: 2

    Виталий, подскажите, а как сделать 4,5 табов, что-то не получается! Копирую, добавляю, назначаю новое название табу - все равно остается три таба!? Спасибо

    • Виталий
      Комментариев: 269

      Где сами табы добавить новую кнопку (четвертую пятую и тд) у нее должен быть свой якорь например - #tab-four
      <li><a href="#tab-four" onclick="click(); return false;">Третий таб</a></li>
      Далее просто добавляем div блок с содержанием этого четвертого таба, только у блока должно совпадать Айди с якорем кнопки, то есть так:
      <div id="tab-four" class="list" style="display: none;">
      Содержание Четвертого блока
      </div>

  • Алексей
    Комментариев: 3

    Здравствуйте. Подскажите пожалуйста, можно ли реализовать ччто бы содержимое первого таба, по умолчанию (т.е. до клика), было скрыто? Как на данном сайте http://ostozhenka.scissor-hands.ru/. Спасибо.

    • Виталий
      Комментариев: 269

      Здравствуйте. Скооперируйте табы с материалом из этой статьи http://gnatkovsky.com.ua/kak-sdelat-spojler-ili-poyavlenie-bloka-pri-nazhatii.html

  • Алексей
    Комментариев: 3

    Спасибо. Виталий, добавил скрипт (из данной Вами выше, статьи), и приписал класс class="spoiler-body" первому табу. Получился результат как и хотелось ( что при входе на страницу содержания первого таба не отображено, т.е. скрыто), но возникла другая трудность, при нажатии на первый таб, далее на второй и т. д. содержимое первого таба не срывается а отображается в контенте второго и третьего табов. Извиняюсь за свою тупость, пожалуйста подскажите в чем может быть проблема. Спасибо.

    • Виталий
      Комментариев: 269

      Попробуйте использовать скрипт с єтой статьи - http://gnatkovsky.com.ua/vertikalnoe-razdvizhnoe-menyu-na-jquery.html
      Там есть вариант, что при нажатии на второй пункт - первый сворачивается. Вот его и используйте. Он по-моему в примере.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий