jQuery 탭(Tab) UI

🧩 탭(Tab) UI 만들기

탭(Tab) UI는 웹사이트에서 콘텐츠를 영역별로 나눠 보기 쉽게 구성할 수 있는 중요한 인터페이스입니다.
jQuery로 간단하고 직관적인 탭 UI를 만들어 보겠습니다.

🔧 1. HTML 구조 만들기

<div class="tab-container">
  <ul class="tabs">
    <li class="active">탭 1</li>
    <li>탭 2</li>
    <li>탭 3</li>
  </ul>

  <div class="tab-content active">탭 1 내용입니다.</div>
  <div class="tab-content">탭 2 내용입니다.</div>
  <div class="tab-content">탭 3 내용입니다.</div>
</div>
  

🎨 2. CSS 스타일링

<style>
.tab-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid #3498db;
}
.tabs li {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  background: #ecf0f1;
  color: #2c3e50;
  font-weight: bold;
}
.tabs li.active {
  background: #3498db;
  color: #fff;
}
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  border-top: none;
  background: #fff;
}
.tab-content.active {
  display: block;
}
</style>
  

li.active가 선택된 탭이며, 해당 인덱스의 .tab-content.active만 보이도록 합니다.

⚙️ 3. jQuery 스크립트

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('.tabs li').click(function() {
      const index = $(this).index();

      $('.tabs li').removeClass('active');
      $(this).addClass('active');

      $('.tab-content').removeClass('active');
      $('.tab-content').eq(index).addClass('active');
    });
  });
</script>
  

탭을 클릭하면 해당 인덱스의 콘텐츠만 보이도록 eq(index)를 활용해 제어합니다.

📌 마무리

이처럼 jQuery를 활용하면 클릭 이벤트로 쉽게 탭 UI를 구현할 수 있습니다.
이 방식을 확장하면 이미지 갤러리, 상품 상세 보기, FAQ 등에도 다양하게 응용할 수 있습니다.