jquery가 작동하지 않는 tabbing

Question

사용자가 "test 1"을 클릭하면 사이드 바 앵커에서 클래스가 활성화되고 "# bar1"목록을 확장 할 배경이 추가되는지 궁금합니다.

결과

이 사이드 바 글꼴이 붉은 것, 그리고 목록 배경이 빨간색

하지만, 내가 여기 내가 클릭 할 경우 확대해야한다 "테스트 1"은 실 거예요 클래스는 앵커 추가 할 수 있습니다. 주십시오 방법을 알고 조각을 검색 할 사람이 코드 $(this).removeClass('active');이 줄을 우리가 siblings 앵커 태그에서 active 클래스를 제거 할 문제를 만들어 내 코드

$(document).ready(function(){ 
 
    $('.sidebar li a').click(function(e){ 
 
    e.preventDefault(); 
 
    $(this).addClass('active'); 
 
    $(this).removeClass('active'); 
 
    var exId=$(this).attr('href'); 
 
    $(exId).addClass('expandBg'); 
 
    $(exId).siblings().removeClass('expandBg') 
 
    }) 
 
});

a.active{ 
 
    text-decoration: none; 
 
    color: #f00; 
 
} 
 

 
.expandBg{ 
 
    background-color:#f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar"> 
 
    <ul> 
 
    <li><a href="#bar1">test 1</a></li> 
 
    <li><a href="#bar2">test 2</a></li> 
 
    <li><a href="#bar3">test 3</a></li> 
 
    <li><a href="#bar4">test 4</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="expand"> 
 
    <ul> 
 
    <li id="bar1">bar1</li> 
 
    <li id="bar2">bar2</li> 
 
    <li id="bar3">bar3</li> 
 
    <li id="bar4">bar4</li> 
 
    </ul> 
 
</div>

Answer 1

를 해결하는 데 도움이 할 수있다 해야 할 일이

$(document).ready(function(){ 
 
    $('.sidebar li a').click(function(e){ 
 
    e.preventDefault(); 
 
    debugger; 
 
    $(this).addClass('active'); 
 
    $(this).parent().siblings().find("a").removeClass("active") 
 
    var exId=$(this).attr('href'); 
 
    $(exId).addClass('expandBg'); 
 
    $(exId).siblings().removeClass('expandBg') 
 
    }) 
 
});

a.active{ 
 
    text-decoration: none; 
 
    color: #f00; 
 
} 
 

 
.expandBg{ 
 
    background-color:#f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar"> 
 
    <ul> 
 
    <li><a href="#bar1">test 1</a></li> 
 
    <li><a href="#bar2">test 2</a></li> 
 
    <li><a href="#bar3">test 3</a></li> 
 
    <li><a href="#bar4">test 4</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="expand"> 
 
    <ul> 
 
    <li id="bar1">bar1</li> 
 
    <li id="bar2">bar2</li> 
 
    <li id="bar3">bar3</li> 
 
    <li id="bar4">bar4</li> 
 
    </ul> 
 
</div>