jQuery로 html 요소에서 클래스를 추가하거나 제거하는 방법

Question

현재 <a></a>에 클래스를 추가하려고 시도했으며 다른 활성 클래스를 다른 <a></a>에서 제거하려고했습니다. 내가 코드에 HTML

<ul> 
    <li> 
    <a href="#" class="active"> 
    Home 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
    About 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
    Service 
    </a> 
    </li> 
</ul> 

jQuery를

$('ul li a').click(function(e){ 
e.preventDefault(); 
$(this).addClass('active').siblings().removeClass('active'); 
}); 

Answer 1

$('ul li a').click(function(e){ 
 
e.preventDefault(); 
 
    $('ul li a').removeClass('active') 
 
$(this).addClass('active'); 
 
});

.active{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="#" class="active"> 
 
    Home 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
    About 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
    Service 
 
    </a> 
 
    </li> 
 
</ul> 
 
jQuery

당신은 다음을 클릭하는 활성 클래스를 추가 앵커의 모든 활성 클래스를 제거 할 수 있습니다 현재 요소를 통해 active 클래스를 적용 앵커

Answer 2

a 요소를

MY FIDDLE

를하려고했던 것은 부모 li

사용 $('ul li a.active') 선택과 remov에는 형제가 없습니다 전자 모든 active 클래스는 다음

$('ul li a').click(function(e) { 
 
    e.preventDefault(); 
 
    $('ul li a.active').removeClass('active') 
 
    $(this).addClass('active'); 
 
});

.active { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="#" class="active"> 
 
    Home 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
    About 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
    Service 
 
    </a> 
 
    </li> 
 
</ul>

Answer 3

직접 형제가 아닌 현재 태그 요소 부모 형제의 자식 인 태그 요소를 찾아야합니다. https://jsfiddle.net/Lwzu738a/1/