🧾 Tab Menu 만들기

Vanilla JS를 이용한 Tab Menu 만들기

    - 자주 쓰이고 기본적인 TabMenu 만들기이며 기본 원리는 탭에 따른 내용은 display : none -> block

.tab-container__item.active {
  border-bottom: 2px solid #369fff;
}

    - 메뉴가 선택 될 시 active라는 클래스를 추가적으로 가지며 border-bottom에 변화를 준다.

.content-container__content {
  display: none;
}
.content-container__content.target {
  display: block;
}

    - 메뉴 선택시 해당하는 content에 target라는 클래스를 추가적으로 가지게 하고 display를 활용하여 표시한다.

<li class="tab-container__item active" data-tab="tab1">
    <a class="tab-container__item--title" href="#">Tab1</a>
</li>
<li class="tab-container__item" data-tab="tab2">
    <a class="tab-container__item--title" href="#">Tab2</a>
</li>

<article id="tab1" class="content-container__content target">
    <h1>Tab1</h1>
    <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia,
    pariatur?
    </p>
</article>
<article id="tab2" class="content-container__content">
    <h1>Tab2</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere,
    culpa!
    </p>
</article>

    - 위와 같이 선택되지 않은 경우와 선택된 경우 클래스를 추가적으로 한개씩 가지게된다.

    - 새로운 윈도우 창으로 여시면 큰창으로 확인가능합니다.

    * 코드확인은 왼쪽bar를 오른쪽으로 !