> For the complete documentation index, see [llms.txt](https://thdbsgh3443.gitbook.io/triplexlab/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://thdbsgh3443.gitbook.io/triplexlab/triplexlab-api/untitled-3.md).

# Tabs

## Getting Started

npm 및 cdn 방식으로 로드하기 \
프로젝트에 triplexlab 가져오는 방법에는 몇 가지 옵션이 있습니다.

```
npm i triplexlab
```

```javascript
<script src="https://unpkg.com/triplexlab/dist/Actives.min.js"></script>
```

{% hint style="info" %}
자세한 로드 방식은 [여기를](https://thdbsgh3443.gitbook.io/triplexlab/getting-started#loading) 참고하세요&#x20;
{% endhint %}

아래와 같은 예시를 확인해 보세요.

{% hint style="info" %}
클릭하여 해당 부분을 활성화, 비활성화 시키는 것을 쉽게 컨트롤 할수 있습니다.\
원하는 addClassName 값을 추가하여 .css에서 컨트롤 할수 있습니다.\
직접 하단에 있는 stackbitz 사이트를 확인해 보세요.
{% endhint %}

다음과 같은 옵션으로 사용할수 있습니다.

{% tabs %}
{% tab title="HTML" %}

```javascript
<ul>
    <li class="tab tab_js">A</li>
    <li class="tab tab_js">B</li>
    <li class="tab tab_js">C</li>
    <li class="tab tab_js">D</li>
    <li class="tab tab_js">E</li>
</ul>
```

{% endtab %}

{% tab title="JavaScript" %}

```javascript
<script>
const my = new tr.Tabs ({
    targets: '.tab_js',
    addClassName: 'actives',  // 넣고 싶은 클랙스 명
    firstItemActive: true,    // 첫번째 아이템을 활성화 할건지 여부체크 true or false
});
</script >
```

{% endtab %}
{% endtabs %}

## 👉🏻예시확인

#### [stackblitz](https://stackblitz.com/edit/web-platform-tyjhlz?file=index.html) 사이트 확인하기&#x20;