Рассмотрим простой способ создания tabs.
Есть три вкладки, с названием ссылка 1,2 и 3.
В каждой ссылке лежит свое содержание.
В index.html сделаем структуру из врапера wrap, которая включает все табы и содержимое.
Есть родительский класс tabs и text для табов и содержимого.
Создадим три ссылки и три таба, в стилях добавим цвета содержимому и цвет ссылки синий.
Index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="wrap"> <div class="tabs"> <span class="tab">Ссылка1</span> <span class="tab">Ссылка2</span> <span class="tab">Ссылка3</span> </div> <div class="text"> <div class="item it1">Техт1</div> <div class="item it2">Текст2</div> <div class="item it3">Текст3</div> </div> </div> |
Main.sass.
|
1 2 3 4 5 6 7 8 |
.wrap .active color: blue .it1 color: green .it2 color: red .it3 color: yellow |
Сделаем скрипт в common.js
Чтобы при нажатии мышкой на каждую ссылку, открывалось свое содержание, добавим скрипт.
- Первой строкой все item отключаем hide, кроме not первого first.
- Добавляем верхним табам .wrap .tab функцию click нажатие компьютерной мышкой по объекту.
- Затем удаляем removeClass (active),у которого был этот класс перед нажатием мышкой
- и добавляем класс active текущему элементу addClass (active). В стилях задано для класса active цвет синий.
- Дальше содержимое прячется (.item).hide (), кроме элемента, у которого такой же индекс как у вкладки, на которую нажали eq ($(this).index ()).fadeIn ().
- И у текущей вкладки появляется класс active.
Код common.js.
|
1 2 3 4 5 6 7 |
$(function() { $(".item").not(":first").hide(); $(".wrap .tab").click(function() { $(".wrap .tab").removeClass("active").eq($(this).index()).addClass("active"); $(".item").hide().eq($(this).index()).fadeIn() }).eq(0).addClass("active"); }); |
Если у нас будут добавляться новое содержимое и пропорционально будут добавляться вкладки, то всеравно это будет работать.
