[jQuery]탭 선택시 탭 활성화, 다른 탭 비활성화 기능

 

 

안녕하세요 무택입니다 :)

오늘은 웹퍼블리싱을 하면 거의 필수로 필요한 기능인 탭 활성화 + 나머지 탭 비활성화 코드에 대해 써보도록 하겠습니다. 사용성이 많은 기능이니 한번 보시면 좋을 거예요

 

 

 

동작 원리

먼저 탭을 선택하면 변화시킬 css내용을 클래스로 만들어놓고 탭을 누르면 모든 탭에서 활성화 클래스 제거, 누른 탭은 활성화 클래스를 추가하는 원리입니다. 여기서 중요한 건 클릭한 탭을 찾아줘야 하기 때문에 'this 선택자'를 사용해야 합니다.

 

 

codepen 예시

See the Pen Untitled by TytanLee (@TytanLee) on CodePen.

 

 

 

 

HTML

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

<ul id="tab_ul">
  <li class="active"><a href="#">탭1</a></li>
  <li><a href="#">탭2</a></li>
  <li><a href="#">탭3</a></li>
</ul>

 

 

CSS

* {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  display: block;
  color: #000;
}
ul {
  display: flex;
  width: 300px;
}
li {
  width: 100px;
  line-height: 50px;
  text-align: center;
  background-color: #999;
}
.active {
  background-color: #ef1111;
}

 

 

JS(jQuery)

$("#tab_ul a").click(function() {
  $('#tab_ul li').removeClass('active');
  $(this).parent().addClass('active');
});

 

 

JS코드 설명

먼저 $("#tab_ul a").click(function()로 클릭할 탭을 설정해 줍니다. 그리고 클릭하면 적용되어 있는 활성화 클래스를 모두 지워줍니다. 저는 li에 클래스를 적용시켰기 때문에 li에서 클래스를 제거해 줬습니다. 그리고 클릭한 탭에 활성화 클래스를 적용해야 하는데 $(thiis)를 사용하면 클릭한 탭을 파악할 수 있으니 활용해서 활성화 클래스를 추가해 줍니다. 저는 li에 활성화 클래스를 적용해야 하기 때문에 parent()를 이용해서 li를 찾아서 적용시켜 줬습니다.

 

여기서 중요한 점은 위 순서가 바뀌면 적용이 안됩니다. 반드시 활성화 클래스 모두 제거 > 클릭한 탭 활성화 순서를 지켜야 기능을 사용할 수 있으니 혹시 기능이 안 된다면 순서가 틀렸나 확인해봐야 합니다!