jqueryがタブで動作しない

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>