[오류일지]7. JQuery - Tab 기능

 

다음과 같이 SNS 버튼을 눌렀을 때 관련 내용을 나오게 하고 싶다.

그러면 어떻게 하는 게 좋을까?

 

 

1. html

            <div class="col3">
                <h2>
                    SNS
                    <div class="h2right snsBtn">
                        <button class="tabBtn tactive" type="button"><img src="images/sns_btn_01.jpg"></button>
                        <button class="tabBtn" type="button"><img src="images/sns_btn_02.jpg"/></button>
                        <button class="tabBtn" type="button"><img src="images/sns_btn_03.jpg"/></button>
                    </div>
                </h2>
                <ul class="sns">
                    <li><a href="#">[지호소프트의 역사:지호한글부터 지호 오피스 NEO까지] 1989년 지호한글의 첫 탄생부터 26년간의 변화를 살펴볼까요?(아니 싫은데)</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore porro exercitationem aspernatur tempora laborum sapiente error eius maxime eveniet molestias? Doloremque commodi doloribus ut ipsam reprehenderit ab eum! Commodi, illo.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero similique quidem, nobis nemo voluptatum placeat hic aut quibusdam illo non explicabo accusantium fugit iusto harum earum neque quae tempore voluptate?</a></li>
                </ul>
            </div>

 

2. CSS

.sns a{
 display: none;
}

.sns>li:first-of-type>a{
    display: block;
}

.snsBtn>button {
    width: 1em;
    height: 1em;
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin: 0.5em;
    opacity: 0.5;
}

.tactive {
    opacity: 1 !important;
}

 

 

 

3. JQuery 

 

.tabBtn을 클릭했을 때, 다음과 같은 일이 일어난다.

    방금 클릭한 그것은 몇 번째냐? 그것을 idx라고 하자.

    .sns a를 숨기자

    .sns a의 idx번째를 보여주자.

    .tabBtn에 "tactive"클래스를 지우자.

    방금 클릭한 그것에 "tactive"룰 넣자.

 

$(".tabBtn").click(function(){
	var idx = $(this).index();
    $(".sns a").hide();
    $(".sns a").eq(idx).show();
    $(".tabBtn").removeClass("tactive");
    $(this).addClass("tactive");
});