제이쿼리 nav active 질문입니다 채택완료
- 옵션선택
- 시간선택
- 개인정보
기본정보
$('#next_btn').on('click', function(){
var index = $('#navigation').find('li.active').index();
$('.q' + index).fadeOut();
var next_page_index = Number(index) + 1;
$('.q' + next_page_index).fadeIn();
// 다음 눌렀을 때 nav li active change
$('#navigation').find('li').each(function(){
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
이렇게 코드를 짜고 다음을 눌렀을 때 다음 active만 활성화가 되어야 하는데 다다음 li도 active가 활성이 되어서 하나씩만 가능하게 될까요...? 코드를 이리짜고 저리짜도 머리가 안돌아가서 고수님들께 여쭤봅니다ㅜㅜ
답변 1개
이런식으로 해도 되지 않을까요?
$('#next_btn').on('click', function(){ var result = $("#navigation").find('li.active'); //li에서 active 클래스를 찾음 if($("#navigation li:last").hasClass("active") === true){ //마지막 요소이면 첫 요소에 active 부여 $("#navigation li:first").addClass('active'); $("#navigation li:last").removeClass('active'); }else{ result.removeClass('active'); result.next("li").addClass('active'); } });
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인