вкладки с помощью CSS

Вкладки на CSS (табы на CSS)

Как создать динамические вкладки, табы только на CSS — БЕЗ использования Javascipt и jQuery.

Скачать исходники для статьи можно ниже

1. Создаем структуру вкладок:

  <input id="tab1" type="radio" name="tabs" checked>
		  <label for="tab1">1</label>
	
		  <input id="tab2" type="radio" name="tabs">
		  <label for="tab2">2</label>
	
		  <input id="tab3" type="radio" name="tabs">
		  <label for="tab3">3</label>
			 	
		  <div class="content">  
			  <div id="content1">
				<p>
				  Содержимое 1-ой вкладки.
				</p>
			  </div>
	
			  <div id="content2">
				<p>
				 Содержимое 2-ой вкладки.
				</p>
			  </div>
	
			  <div id="content3">
				<p>
				 Содержимое 3-ей вкладки.
				</p>
			  </div>
			  
		  </div>

Для примера, можно вставить данный код в виджет «Текст».
Заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид», подпункт «Виджеты», выбираем виджет «Текст» и вставляем в него вышеуказанный код:

CSS вкладки табы

2. Далее прописываем стили для вкладок:

.content > div {display: none; padding: 20px 25px 5px;}
 
   input {display: none;}
   label {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;}
   label:hover {color: #fff; cursor: pointer;}
   input:checked + label {background: #ed5a6a; color: #fff;}
 
   #tab1:checked ~ .content #content1,
   #tab2:checked ~ .content #content2,
   #tab3:checked ~ .content #content3 {
     display: block;
   }
 

Для сайтов на wordpress — файл стилей находится в админке, в пункте «Внешний вид», подпункт «Редактор», справа в списке шаблонов выбираем файл стилей — style.css и вставляем в него (можно в самом низу) вышеуказанный код.

Теперь заходим на сайт и видим результат:

вкладки с помощью CSS

PS: Как в wordpress вставить вкладки в самой записи сверху?

Можно воспользоваться произвольными полями.

Для этого заходим в создание новой записи — в левом меню выбираем пункт «Записи» — подпункт «Добавить новую».

Если окно «Произвольные поля» не видны — то заходим во вкладку «Настройки экрана» и ставим галочку напротив пункт «Произвольные поля»:

tab3

Далее создаем новое произвольное поле — задаем имя и в его содержимое вставляем код динамических вкладок:

tab4

А далее в файл single.php (в админке выбираем пункт «Внешний вид», подпункт «Редактор», справа в списке шаблонов выбираем пункт ) вставляем код вывода произвольного поля с заданным именем, в данном примере имя произвольного поля — 333.

<?php echo (get_post_meta($post->ID, '333', true)); ?>

Можно вставить данный код перед выводом контента статьи (цикл loop):

<?php
/**
 * The template for displaying all single posts and attachments
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

<?php echo (get_post_meta($post->ID, '333', true)); ?>


		<?php
		// Start the loop.
		while ( have_posts() ) : the_post();

			/*
			 * Include the post format-specific template for the content. If you want to
...

Вот что в итоге получилось:

tab5

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc