[Bootstrap] JavaScript 플러그인을 이용한 동적 탭메뉴

Bootstrap과 JavaScript 플러그인을 이용하여 클릭할 때마다 하단 컨텐츠 내용이 바뀌는 동적 탭메뉴를 구현하였다. 해당 모듈의 코드는 두 가지 부분으로 나눌 수 있다.

 

<ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#menu1_n">Menu1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2_n">Menu2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu3_n">Menu3</a>
    </li>
  </ul>

 

1) 첫번째 부분은 <ul>과 <li>태그를 이용하여 nav의 구조를 만들어주는 부분이다. 부모 태그인 ul에 "nav nav-pills" 를, 자식 태그인 li에 "nav-item"을 작성하여 구조를 만든 뒤, 각 nav-item 안에 앵커 태그를 작성하여 각각 클릭 시 별도의 id를 가진 요소를 노출하도록 하였다.

 

<div class="tab-content">
      <div id="menu1_n" class="container tab-pane active"><br>
        <h3>오늘의 세트메뉴1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu2_n" class="container tab-pane fade"><br>
        <h3>오늘의 세트메뉴2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu3_n" class="container tab-pane fade"><br>
        <h3>오늘의 세트메뉴3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
</div>

 

2) 두번째 부분은 먼저 작성한 앵커 태그를 클릭할 때마다 원칙에 따라 움직이는 '내용'을 만들어주는 부분이라고 할 수 있다. 최상위 <div>태그의 class명을 "tab-content"로 작성해준 후 자식 div의 class에 id를 명시함과 동시에 "container tab-pane"을 작성해주었다. default로 클릭되어 있는 상태를 표현하기 위하여 active를 나머지 개체들에는 fade를 붙여주었다.

 

완성~!

https://getbootstrap.com/docs/5.1/components/navs-tabs/#horizontal-alignment