Как сделать вкладки на jQuery, HTML, CSS

Во многих проектах требуется оптимизация рабочей области сайта. В большинстве случаев помогает реализация вкладок на jQuery, HTML и CSS. А реализовать их достаточно просто. Нам потребуется 3 блока кода HTML, CSS и jQuery соответсвенно.

HTML

<div class="tabs">
        <ul>
            <li class="active"><a href="#tab1">Вкладка 1</a></li>
            <li><a href="#tab2">Вкладка 2</a></li>
            <li><a href="#tab3">Вкладка 3</a></li>
            <li><a href="#tab4">Вкладка 4</a></li>
        </ul>
        <div class="tabscontent">
            <div id="tab1" class="active">
                <h2>Вкладка 1</h2>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
            <div id="tab2">
                <h2>Вкладка 2</h2>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
            <div id="tab3">
                <h2>Вкладка 3</h2>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
            <div id="tab4">
                <h2>Вкладка 4</h2>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
        </div>
    </div>

CSS

.tabs {
    width: 400px;
    margin: 30px auto;
}
.tabs ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;
}
.tabs ul li {
    list-style-type: none;
    display: inline-block;
    padding: 10px 15px;
    background: #ccc;
}
.tabs ul li a {
    font-size: 14px;
    color: #000;
    text-decoration: none;
}
.tabs ul li.active {
    background: #fff;
}
.tabscontent>div {
    width: 100%;
    display: none;
    background: #fff;
    padding: 15px 15px;
    border-radius: 0 0 5px 5px;
}
.tabscontent>div.active {
    display: block;
}

JQUERY – JAVASCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.tabs li a').click(function(e) {
                e.preventDefault();
                $('.tabs li,.tabscontent>div').removeClass('active');
                $(this).parent().addClass('active');
                var target = $(this).attr('href');
                $(target).addClass('active');
            })
        })
 
    </script>

Вот собственно и все – наши вкладки на jQuery готовы. Данный код можно модернизировать, чтобы отслеживался hash и при открытии страницы открывалась нужная вкладка.

Скачать исходники