# 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://thdbsgh3443.gitbook.io/triplexlab/triplexlab-api/untitled-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.