제이쿼리 질문
본문
$('.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 구조를 정확하게 알 수 없지만, 아래 코드를 사용해보세요
위 코드를 간결하게 줄인 코드입니다.
$(".sec_2_btn_list").eq(0).addClass("active");
$(".sec_2_btn_list").click(function(e){
e.preventDefault();
var index = $(this).index();
$(".sec_2_btn_list").removeClass("active").eq(index).addClass("active");
$(".sec_2_con_list").hide().eq(index).fadeIn(200).css("display","flex");
})
