Итак, расскажу вам и покажу, как можно сэкономить место в блоках на блоге или сайте. Эту возможность некоторые веб-мастера называют вкладкой, а некоторые табами. Как это все работает? Вот пример на моем блоге: найдите с правой стороны блок «Свежие комментарии» и три кнопки «Новые комментарии», «TOP-комментаторов» и «Моя мечта»:
Если вы нажмете на любую из этих кнопочек, загрузится новое содержание, только в блоке. Ага!!! Вам понравилось? Это то, что вы искали?! Теперь пришло время рассказать, как это можно реализовать на блоге или сайте.
Многие веб-мастера обходятся плагином postTabs, но мы же не многие, поэтому будем делать все вручную.
Для начала скопируйте, вставьте и сохраните этот код для обычной HTML страницы:
<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script ENGINE="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> <style> #tabs ul.wptab,#tabs ul.wptab-category{position:relative;bottom:-1px;padding:0;z-index:99} #tabs ul.wptab li,#tabs ul.wptab-category li{float:left;display:inline;margin-right:2px;font-weight:700;color:#fff;cursor:pointer} #tabs ul.wptab li a.selected,#tabs ul.wptab li a:hover{background:#fff;text-decoration:none;border:1px solid #d9d9d9;color:#666;background:#fff;} #tabs ul.wptab li a{border:1px solid #cac8c8; padding:5px; color:#5e4d06; font: 15px "Times New Roman", Times, serif; text-decoration: none; background:#fdd61d;} </style> </head> <body> <!-- табы --> <div id="tabs"> <ul class="wptab"> <li class="popular"><a href="#tab-pop" class="selected" onclick="click(); return false;">Название_1</a></li> <li class="latest"><a href="#tab-latest" onclick="click(); return false;">Название_2</a></li> <li class="comments"><a href="#tab-comm" onclick="click(); return false;">Название_3</a></li> </ul> </div> <br><br> <div id="tab-pop" class="list" style="display: block;"> <!-- Текст с картинками --> BlogGood.ru - это то, что тебе нужно! <!--/ Текст с картинками --> </div> <div id="tab-latest" class="list" style="display: none;"> <!-- Текст с картинками_2 --> Хочешь узнать основы HTML, CSS, PHP? Тогда тебе сюда - BlogGood.ru <!--/ Текст с картинками_2 --> </div> <div id="tab-comm" class="list" style="display: none;"> <!-- Текст с картинками_3 --> Вот такие вот табы <!--/ Текст с картинками_3 --> </div> <!--/ табы --> </body> </html>
Этот код вы можете использовать для своих сайтов, сделанных на HTML или PHP.
Но как же быть с WordPress? Попробуем этот код (тот, что выше) разместить на WordPress.
1). Откройте админ панель => «Внешний вид» => «Редактор» => «Заголовок (header.php)» и вставьте код между тегами <head> здесь будет код</head>:
<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>
2). Далее переходим к CSS файлу («Внешний вид» => «Редактор» => «Таблица стилей (style.css)») и в самом конце вставьте этот код:
#tabs ul.wptab,#tabs ul.wptab-category{position:relative;bottom:-1px;padding:0;z-index:99} #tabs ul.wptab li,#tabs ul.wptab-category li{float:left;display:inline;margin-right:2px;font-weight:700;color:#fff;cursor:pointer} #tabs ul.wptab li a.selected,#tabs ul.wptab li a:hover{background:#fff;text-decoration:none;border:1px solid #d9d9d9;color:#666;background:#fff;} #tabs ul.wptab li a{border:1px solid #cac8c8; padding:5px; color:#5e4d06; font: 15px "Times New Roman", Times, serif; text-decoration: none; background:#fdd61d;}
3). Теперь будем выводить сами табы в боковой колонке (sidebar.php). Для этого нужно перейти во «Внешний вид» => «Редактор» => «Боковая колонка (sidebar.php)». Вставьте этот код в то место, где вы хотите вывести табы:
<!-- табы --> <div id="tabs"> <ul class="wptab"> <li class="popular"><a href="#tab-pop" class="selected" onclick="click(); return false;">Название_1</a></li> <li class="latest"><a href="#tab-latest" onclick="click(); return false;">Название_2</a></li> <li class="comments"><a href="#tab-comm" onclick="click(); return false;">Название_3</a></li> </ul> </div> <br><br> <div id="tab-pop" class="list" style="display: block;"> <!-- Текст с картинками --> BlogGood.ru - это то, что тебе нужно! <!--/ Текст с картинками --> </div> <div id="tab-latest" class="list" style="display: none;"> <!-- Текст с картинками_2 --> Хочешь узнать основы HTML, CSS, PHP? Тогда тебе сюда - BlogGood.ru <!--/ Текст с картинками_2 --> </div> <div id="tab-comm" class="list" style="display: none;"> <!-- Текст с картинками_3 --> Вот такие вот табы <!--/ Текст с картинками_3 --> </div> <!--/ табы -->
Вот и все! Не знаю как вам, но для меня табы (вкладки) действительно показались полезными, так как это отличная возможность разместить всю нужную и объемную информацию, но при этом существенно сэкономить место в боковой колонке.
На последок красивые табы (вкладки) с эффектами для вашего сайта.
[ посмотреть пример ]
[ скачать ]
Удачи Вам, мои дорогие друзья! Я рад абсолютно всем!!!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220443 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181501
Добавить комментарий
Метки: wordpress, без плагинов, для сайта, эффекты для сайта
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐