테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 질문 채택완료

히얀 1년 전 조회 1,089

$('.sec_2_btn_list:nth-child(1)').addClass("active");

 

    $(".sec_2_con_list").each(function(ii){

 

        $(this).attr("data-num", ii);

 

    });

 

    $(".sec_2_btn_list").each(function(i){

 

        $(this).attr("data-index", i);

 

    }).click(function(event){

 

        event.preventDefault();

 

        $('.sec_2_btn_list').removeClass("active");

        $(this).addClass("active");

 

        var iii = $(this).attr("data-index");

 

   

        $(".sec_2_con_list").css("display", "none");

 

        $(".sec_2_con_list[data-num='" + iii + "']").fadeIn(200).css("display", "flex");

           

    });

 

버튼을 클릭하면 해당 버튼에 맞는 컨텐츠로 교체되도록 작업하는데 

처음 버튼을 누를 때 계속 스크롤이 위로 튑니다. 

버튼과 리스트를 구성하는 html에는 따로 a태그가 없고요.

안튀게 하는 방법이 있을까요? 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
1년 전

html 구조를 정확하게 알 수 없지만, 아래 코드를 사용해보세요

 

위 코드를 간결하게 줄인 코드입니다.

 

</p>

<p>$(".sec_2_btn_list").eq(0).addClass("active");</p>

<p>            $(".sec_2_btn_list").click(function(e){</p>

<p>                e.preventDefault();</p>

<p>                var index = $(this).index();</p>

<p>                $(".sec_2_btn_list").removeClass("active").eq(index).addClass("active");</p>

<p>                $(".sec_2_con_list").hide().eq(index).fadeIn(200).css("display","flex");</p>

<p>            })</p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인