제이쿼리 nav active 질문입니다
본문
<nav id="navigation">
<ul>
<p>기본정보</p>
<li class="active">옵션선택</li>
<li>시간선택</li>
<li>개인정보</li>
</ul>
<div class="cross_line"></div>
</nav>
$('#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
이런식으로 해도 되지 않을까요?
<script>
$('#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');
}
});
</script>
잘 됩니다ㅠㅠ 너무 감사합니다!!