https://github.com/andrew--r/puretabs

Простые табы на чистом JavaScript.
https://github.com/andrew--r/puretabs

Last synced: about 6 hours ago
JSON representation

Простые табы на чистом JavaScript.

• Host: GitHub
• URL: https://github.com/andrew--r/puretabs
• Owner: andrew--r
• Created: 2015-05-02T10:22:49.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-05-04T12:31:46.000Z (over 9 years ago)
• Last Synced: 2024-05-14T00:44:53.205Z (6 months ago)
• Language: HTML
• Homepage: http://andrew--r.github.io/puretabs
• Size: 125 KB
• Stars: 41
• Watchers: 7
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# pureTabs

Простые табы без зависимостей на чистом JavaScript.

Работает во всех современных браузерах (IE9+).

## Примеры использования

Простейший пример:

```html

Первая секция

Вторая секция

Содержимое первой секции

Содержимое второй секции


  window.onload = function() {

    pureTabs.init();

  }

```

Ссылки и секции связаны идентификатором секции, который прописывается в атрибут `href` у ссылки. Каждая ссылка должна иметь общий класс (по умолчанию — `puretabs`). Чтобы задать секцию по умолчанию, следует добавить к ссылке на эту секцию класс `puretabs--active`.

### Пользовательские классы

Чтобы задать ссылкам пользовательские классы, достаточно при инициализации скрипта передать их в качестве параметров:

```javascript

var className = 'tab',              // Общий класс ссылок

    activeClassName = 'tab--active' // Класс активной ссылки

pureTabs.init(className, activeClassName);

```

### Несколько табов на странице

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

```html



  Первая секция

  Вторая секция


  
Содержимое первой секции

  
Содержимое второй секции





  Секция 1

  Секция 2


  
Содержимое секции 1

  
Содержимое секции 2



  window.onload = function() {

    pureTabs.init();                        // Для .tabs--first

    pureTabs.init('tabs', 'tabs--active');  // Для .tabs--second

  }

```