KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #ai-agent #claude-code #mcp #typescript #codex #cli #rust #deepseek-harness

puretabs

★ 40 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

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

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

```html
<a class="puretabs puretabs--active" href="#first">Первая секция</a>
<a class="puretabs" href="#second">Вторая секция</a>

<div id="first">Содержимое первой секции</div>
<div id="second">Содержимое второй секции</div>

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

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

```javascript
var className = 'tab',              // Общий класс ссылок
    activeClassName = 'tab--active' // Класс активной ссылки

pureTabs.init(className, activeClassName);
```

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

```html
<div class="tabs tabs--first">
  <a class="puretabs puretabs--active" href="#first">Первая секция</a>
  <a class="puretabs" href="#second">Вторая секция</a>

<div id="first">Содержимое первой секции</div>
  <div id="second">Содержимое второй секции</div>
</div>

<div class="tabs tabs--second">
  <a class="tabs tabs--active" href="#first">Секция 1</a>
  <a class="tabs" href="#second">Секция 2</a>

<div id="one">Содержимое секции 1</div>
  <div id="two">Содержимое секции 2</div>
</div>

puretabs

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README