Август 2017
Автор: Рубрика: Верстка Комментариев нет

Простой способ создания tabs на сайте


Простой способ создания tabs на сайте

Рассмотрим простой способ создания tabs.

Есть три вкладки, с названием ссылка 1,2 и 3.

В каждой ссылке лежит свое содержание.

В index.html сделаем структуру из врапера wrap, которая включает все табы и содержимое.

Есть родительский класс tabs и text для табов и содержимого.

Создадим три ссылки и три таба, в стилях добавим цвета содержимому и цвет ссылки синий.

В index.html сделаем структуру tabs

Index.html.

Main.sass.

Сделаем скрипт в common.js

Чтобы при нажатии мышкой на каждую ссылку, открывалось свое содержание, добавим скрипт.

  • Первой строкой все item отключаем hide, кроме not первого first.
  • Добавляем верхним табам .wrap .tab функцию click нажатие компьютерной мышкой по объекту.
  • Затем удаляем removeClass (active),у которого был этот класс перед нажатием мышкой
  • и добавляем класс active текущему элементу addClass (active). В стилях задано для класса active цвет синий.
  • Дальше содержимое прячется (.item).hide (), кроме элемента, у которого такой же индекс как у вкладки, на которую нажали eq ($(this).index ()).fadeIn ().
  • И у текущей вкладки появляется класс active.

Код common.js.

Если у нас будут добавляться новое содержимое и пропорционально будут добавляться вкладки, то всеравно это будет работать.

Несколько тамбов

Комментариев нет