X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-19
  • 14027 переглядів

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

Доброго времени суток 🙂
Недавно мне заказали добавить на сайт 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
Проголосовало: 22, в среднем: 4.8 из 5
Читайте також