[Web] 홈페이지 탭 전환 기능 구현하기 (addClass, removeClass 이용)

 홈페이지에서 addClass, removeClass 이용해서 탭 전환하는 방법을 알아봅니다.

 

[ Contents ]

 

 

1. HTML

            <section class="notice">
                <ul class="tabmenu">
                    <li class="active"><a href="#notice">공지사항</a></li>
                    <li><a href="#gallery">갤러리</a></li>
                </ul>
                <div class="tabcontent">
                    <div class="active" id="notice">
                        <ul>
                            <li><a href="#">공지1<span class="date">2025.06.01</span></a></li>
                            <li><a href="#">공지2<span class="date">2025.06.02</span></a></li>
                            <li><a href="#">공지3<span class="date">2025.06.03</span></a></li>
                            <li><a href="#">공지4<span class="date">2025.06.04</span></a></li>
                        </ul>
                    </div>
                    <div id="gallery">
                        <ul>
                            <li><a href="#"><img src="images/gallery1.jpg" alt="gallery1"></a></li>
                            <li><a href="#"><img src="images/gallery2.jpg" alt="gallery2"></a></li>
                            <li><a href="#"><img src="images/gallery3.jpg" alt="gallery3"></a></li>
                        </ul>
                    </div>
                </div>
            </section>

 홈페이지 내에 탭 메뉴를 구현합니다.

 <ul>과 <li> 태그를 이용해서 탭이 될 부분과 아래 내용을 만듭니다.

 

 탭을 선택하는 부분과 탭의 내용은 서로 다른 ul 태그가 합쳐진 형태입니다.

 탭을 골랐을 때, 해당 탭의 내용이 나오는 건 CSS와 JS에서 만들어줍니다.

 

 

2. CSS

/* tab */
.tabmenu{   /* 탭메뉴 -선 지우기 */
    position: relative;
    top: 1px;   /* 위에서 1px 여백 줘서 내리기 */
    z-index: 1; /* 가장 위로 올려서 tabcontent보다 위로 가게 만들기기 */
    display: flex;
}

.tabmenu li a{
    display: block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #ccc;
}

.tabmenu li.active a{
    background: #fff;   /* active 인 탭만 하양색 */
}

.tabcontent{
    padding: 10px;
    border: 1px solid #ccc;
    position: relative;
    height: 150px;
}

.tabcontent > div {
    position: absolute;
    left: 0;
    right: 0;
    display: none; 
}

.tabcontent > div.active {
    display: block; /* active 인 컨텐츠만 보임 */
}

#notice{
    padding: 0 10px;
}

#notice span{
    float: right;
    margin-right: 10px;
}

#notice li{
    line-height: 30px;
}

#notice li:nth-child(even) {
    background: #ccc;
}

#gallery{
    padding: 20px;
}

#gallery ul{
    display: flex;
    justify-content: space-between;
}

 부가적인 CSS가 많지만, 가장 핵심적인 코드는 아래와 같습니다.

 

.tabcontent{
    padding: 10px;
    border: 1px solid #ccc;
    position: relative;
    height: 150px;
}

.tabcontent > div {
    position: absolute;
    left: 0;
    right: 0;
    display: none; 
}

.tabcontent > div.active {
    display: block; /* active 인 컨텐츠만 보임 */
}

 부모인 tabcontent를 기준으로, 탭 내용을 담은 div를 absolute로 위치르 고정시켜 겹칩니다.

 그리고 display: none을 통해 보이지 않도록 설정합니다. 그 후에 active 클래스가 있으면 보이도록 display: block 속성을 덧붙입니다. active 클래스를 넣고 빼는 건 자바스크립트에서 해줍니다.

 

반응형

 

3. Java script

// 탭 전환
let tabMenu = $('.tabmenu li');
let tabContent = $('.tabcontent > div');

tabMenu.click(function(e){
    e.preventDefault();	// 링크속성 제거
    tabMenu.removeClass('active');
    $(this).addClass('active');

    let target = $(this).find('a').attr('href');
    tabContent.removeClass('active');
    $(target).addClass('active');
})

 

 tabMenu의 active 클래스를 제거하고, 선택한 요소에 active 클래스를 부여합니다. 그 후 선택한 탭 메뉴의 링크 id를 찾아서, 해당 tabContent에 active 클래스를 부여합니다.

 $(this).find('a').attr('href')는 클릭한 요소의 a태그를 찾아, a태그의 href 값을 가져오라는 코드입니다. href에 활성화될 탭 id를 적어뒀으므로, 해당 탭 id를 찾아서 active 클래스를 부여합니다.