Доброго времени суток 🙂
Недавно мне заказали добавить на сайт WordPress табы или панель вкладок, как кому угодно. При нажатии на такой таб, пользователь переключается на окна не перезагружая страницы. Пример можно посмотреть внизу данной статьи. Это должно осуществляться без подключения плагинов.
И так приступим.
Для начала нужно сделать разметку.
<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>
В файл 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>
Добавляем стили в наш файл стилей, например 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;}
Если все сделано правильно, то должно получится так.
