X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2018-12-17
  • 7063 просмотр

    17 комментарий

  • Дизайн и разработка сайта

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

 

no image

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


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

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

<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
Проголосовало: 17, в среднем: 5 из 5
Читайте также
Опубликовано 17 комментариев

Добавить комментарий для Валерий Отменить ответ

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.