Jquery Табы

реализация табов на простом jquery

by Denis Tverdokhlebov

HTML

<div class="tabs_block">
    <ul class="tabs">
        <li class="active">Вкладка1</li>
        <li>Вкладка2</li>
        <li>Вкладка3</li>
    </ul>
    <div class="box visible"> 
        <p>Содержание первой вкладки...</p>
    </div>
    <div class="box">
        <p>Содержание второй вкладки...</p>
    </div>
    <div class="box">
        <p>Содержание третьей вкладки...</p>
    </div>	
</div>

CSS

/* базовый контейнер вкладок */
.tabs_block {
    width: 100%;
    max-width: 600px;
    min-width: 300px;
    margin: 0 auto;
}
.tabs_block:after {
    content:"";
    display:block;
    clear:both;
}
/* панель навигации вкладок */
.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
}
/* список вкладок */
.tabs li {
    text-align:center;
    float:left;
    padding:8px 15px;
    background:#48c3d6;
    margin-right:1px;
    cursor:pointer;
    color:#fff;
    -webkit-transition:all .2s linear 0s;
    -webkit-transition-delay:.2s 0s;
    transition:all .2s linear 0s;
}
/* активная вкладка */
.tabs li.active {
    background:#fdfdfd;
    color:#4F5559; 
}
/* блоки вкладок с содержанием */
.box {
    background:#fdfdfd;
    width:96%;
    padding:5px 2% 6px;
    display:none;
    text-align: left;
    float: left;
}
/* параграф внутри вкладок */
.box p {
    margin-bottom: 15px;
}
/* активный блок при загрузке */
.visible, .open_tab {
    display: block;
}
/* картинки внутри вкладок */
.box img {
    width: 25%;
    height: auto;
}
/* картинки слева */
.pl-left {
    float:left;
    margin:5px 15px 5px 0;
}
/* картинки справа */
.pl-right {
    float:right;
    margin:5px 0 5px 15px;
}
/* убираем выравнивание на маленьких экранах */
@media (max-width: 300px) {
  .tabs, .tabs li {
   float: none;
  }
}

JavaScript

(function(s) {
    var n;
    s(".tabs").on("click", "li:not(.active)", function() {
        n = s(this).parents(".tabs_block"), s(this).dmtabs(n)
    }), s.fn.dmtabs = function(n) {
        s(this).addClass("active").siblings().removeClass("active"), n.find(".box").eq(s(this).index()).show(1, function() {
            s(this).addClass("open_tab")
        }).siblings(".box").hide(1, function() {
            s(this).removeClass("open_tab")
        })
    }
})(jQuery);