제이쿼리 질문 채택완료
$('.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개
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>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인