Как сделать простые табы в блоге (часть 2)

Как сделать простые табы в блоге (часть 2) | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Продолжаю тему создания простых табов в блоге, не требующих глубоких знаний PHP и Java. Первый способ, который я описывал недавно, был основан на списках, в которых табами служили специальные ссылки. Эти ссылки показывали содержимое табов, оформленное особым образом и активируемое с помощью скрипта. Второй способ, который я хочу рассмотреть, попроще — нет эффектов во время смены содержимого табов, но и нет лишних внутренних ссылок для активации табов. Именно этот способ я использовал в блоге 123-box.ru.

Как сделать простые табы в блоге (часть 2)

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 #codec; border-bottom:0; padding:0 1em; position:relative; left:35px; margin-right:1px; cursor:pointer; }
.tabs dt:hover { background-color:#codec; }
.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 #codec; padding:20px 20px 10px 20px; }

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

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

		
			$(function(){
				$('dl.tabs dt').click(function(){
					$(this)
						.siblings().removeClass('selected').end()
						.next('dd').andSelf().addClass('selected');
				});
			});
		

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

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

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

  1. Владимир Медведев

    Очень интересное решение использовать табы.

    Действительно повышает удобство комментирования и наводит порядок в нагромождении способов авторизаций.

    Ответить
  2. vovasik

    а в хроме этот способ точно работает ?

    Ответить
    1. А в вашем хроме Java-скрипты разрешено выполнять?

      Ответить
  3. vovasik

    просто он его так долго открывает, вот и думаю с табами что то не так или виджет фейсбука кривой

    Ответить
  4. vovasik

    а нет все работает div / не с той стороны закры :) респект и уважуха, пол интернета облазил искал как табы сделать

    Ответить
  5. Lenz

    Здравствуйте, подскажите плиз, у меня почему-то не переключаются табы, где может быть ошибка? И как правильно вставлять табы в запись?

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

      Ответить
      1. Lenz

        Спасибо за оперативный ответ))) Не могу сказать что не получилось, табы вставились, но почему-то во все записи, вот и не могу понять что собственно не так. Все вставила по инструкции))

        Ответить
        1. Все правильно — во все записи. Для этого они и придуманы. Если же вам нужно вставить табы в какую-то конкретную запись, посмотрите эти записи:

          Ответить
          1. Lenz

            Аааа, все поняла))) Спасибо за отличный сайт!

            Ответить
            1. Пожалуйста! И не забывайте плюсовать полезные комментарии и статьи.

              Ответить
      2. все равно не работает.

        Ответить
  6. vovasik

    ошибка либо в html, либо java криво подключен ? третьего не дано

    Ответить
  7. ADv

    для того, чтобы органично вписать табы в тему мне нужно убрать

     overflow:hidden; 

    , но без него один таб наезжает на другой. возможны еще варианты?

    Ответить
    1. ADv

      в идеале бы было разделить на .tabs dt1 и .tabs dt2, но тогда не срабатывает код

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

      как его подправить для dt1 и dt2 ?

      п.с. маюсь уже 4й час :(

      Ответить
  8. umnikzz

    все круто но у меня не заработало переключение между табами. Может где-то косяк в скрипте.
    взял пример отсюда http://chikuyonok.ru/playground/tabs/ и добавил стиль с вашего примера. теперь все нормально работает.

    Ответить
  9. Beetroot

    У меня тоже не работало, но потом когда подключил jquerry, то все заработало!

    Ответить
  10. Cortexiusss

    Пользуюсь этой переключалкой давно для комментариев. Решил вынести соц сети в эти табы, но приключилась странная вещь: создаю 3 вкладки и почему-то не отображается содержимое 3 вкладки, что интересно при загрузке страницы если нажать сразу на третью табу то содержимое загружается, но не показывается в одном из других, что это может быть?

    Ответить