Вертикальные и горизонтальные табы на jQuery

Данный плагин позволяет реализовать простые и удобные в использовании вертикальные/горизонтальные вкладки на jQuery.

Как реализовать:

1.Подключаем библиотеку jQuery и сам плагин:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.tabs.min.js"></script>

1. Подключаем стили CSS

<link rel="stylesheet" href="dist/jquery.tabs.css">

1. Теперь html код самих вкладок (табов)

<div class="jq-tab-wrapper" id="verticalTab">
<div class="jq-tab-menu">
<div class="jq-tab-title active" data-tab="1">title 1</div>
<div class="jq-tab-title" data-tab="2">title 2</div>
<div class="jq-tab-title" data-tab="3">title 3</div>
</div>
<div class="jq-tab-content-wrapper">
<div class="jq-tab-content active" data-tab="1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum, animi aperiam! Odio harum error enim aliquam
voluptates, quibusdam fuga maxime doloremque blanditiis et! Laborum neque esse ab voluptates, perferendis
nam. Sint alias provident reiciendis ut facilis obcaecati, aliquid excepturi architecto quibusdam aperiam
numquam! Reprehenderit vitae ducimus, magni labore maiores architecto aliquid inventore facere aut eveniet
officia recusandae voluptatum maxime provident.</div>
<div class="jq-tab-content" data-tab="2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, magnam mollitia consequuntur modi sit nostrum
molestiae sunt nihil, quisquam eligendi expedita quae, id natus provident labore odio! Necessitatibus, odit.
Iure. Delectus magnam eius, facere ratione est dicta, placeat labore possimus, praesentium ex quos similique
veritatis illum velit minima dolor beatae.</div>
<div class="jq-tab-content" data-tab="3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit cumque aperiam amet officiis atque accusamus repudiandae
perspiciatis aliquid voluptatum itaque, sint, pariatur architecto mollitia laborum fuga culpa dignissimos
quo debitis.
</div>
</div>
</div>

Где

id="verticalTab"

означает (задает) что вкладки вертикальные, и соответственно

id="horizontalTab"

горизонтальные вкладки.

1. Активируем плагин:

    <script>
        $(function () {
            $('#verticalTab').jqTabs();
            $('#horizontalTab').jqTabs({direction: 'horizontal', duration: 200});
        });
    </script>

Готово.