Обнаружил в интернете очень простой способ создания табов без использования JS.

<ul class="tabs">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
</ul>
<div class="tabs-content">
    <ul>
        <li id="one">1</li>
        <li id="two">2</li>
        <li id="three">3</li>
        <li id="four">4</li>
        <li id="five">5</li>
    </ul>
</div>

Разметка простая. Список .tabs используется для навигации. Далее идет контейнер .tabs-content со списком, в котором каждый элемент li это отдельный слайд.

.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content li {
    width:960px;
    height:300px;
}

Ссылки в навигации указывают на соответствующие id слайдов. Слайдам установлена ширина и высота равные внешнему контейнеру.

Работает в Firefox, Opera (для старых версий нужно немного дополнить CSS), Safari, IE6+.

Добавлено: 01 Мая 2018 09:35:12 Добавил: Андрей Ковальчук Нравится 0

Добавить