2014-12-20 5 views
1
<div class="tab-pane active"></div> 
<div class="tab-pane"></div> 
<div class="tab-pane"></div> 
<div class="tab-pane"></div> 
<button id="action">Next Div</button> 

#action 버튼을 클릭하여 다음 탭 분할구 div에 "활성"클래스를 추가하고 싶습니다. 즉, 내가 처음 #action 버튼을 클릭하면 다음 내 DOM처럼 보이는 -비슷한 클래스의 다음 div 찾기. 모든 형제 클래스가 아닙니다

<div class="tab-pane active"></div> 
<div class="tab-pane active"></div> 
<div class="tab-pane"></div> 

내가 #action 버튼을 두 번째로 클릭하면 DOM 보인다 -

<div class="tab-pane active"></div> 
<div class="tab-pane active"></div> 
<div class="tab-pane active"></div> 
<div class="tab-pane"></div> 

어떻게 jQuery를에 있다고 할 수 있습니까?

+0

는 특정 클래스의 마지막 요소 다음 몇 가지 클래스와'div'를 삽입 하시겠습니까 (귀하의 경우'active') 데르 않습니다 당신은'active' 클래스를 가진 마지막 요소 뒤에 엘레멘트에 클래스를 추가하려고합니다. 내 생각에 첫 번째 코드 블록을 설명해 주시겠습니까? 다음 두 코드 블록과 매우 유사하지 않습니다. –

답변

1

이 도움이 될 것입니다

$('#action').click(function() { 
 
    $('.tab-pane.active').next('div').addClass('active'); 
 
});
div { 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 
.active { 
 
    background: orange; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="tab-pane active"></div> 
 
<div class="tab-pane"></div> 
 
<div class="tab-pane"></div> 
 
<div class="tab-pane"></div> 
 
<button id="action">Next Div</button>

+0

첫 번째 : 제 의견으로는 아직 질문이 명확하지 않습니다 (첫 번째 코드 블록이 설명되지 않음). 2 번 : 코드가 무엇을 설명하는지 알려주십시오. 미숙 한 사용자가 코드와 설명을 함께 쓸 수 있습니다. –