從你的導航中添加和刪除一個jQuery類

Question

我有一個簡單的導航。我想圍繞點擊的導航項目有一個紅色的邊框。例如：如果您點擊「商店」，則應用商店周圍應該有一個紅色邊框。然後，如果您點擊另一個導航項目「聯繫人」，則紅色邊框應該從商店和聯繫人項目中移除。這是迄今爲止我所擁有的。

HTML：

<ul class="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Store</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 

CSS：

.active { 
    border: 2px solid red; 
    padding: 5px; 
} 

JS：

$('.nav li').click(function() { 
    $(this).addClass('active'); 
    $(this).removeClass('active'); 
} 

不是真正強大的jQuery中。任何幫助將是偉大的...謝謝！

Answer 1

此代碼應該是你在找什麼：

$('.nav li').click(function() { 
    $('.nav li.active').removeClass('active'); 
    $(this).addClass('active'); 
} 

Answer 2

您的JS正在添加該類，然後立即從相同的元素中刪除它。試試這個

$('.nav li').click(function() { 
    $('.nav li').removeClass('active'); 
    $(this).addClass('active'); 
} 

Answer 3

如果你的錨標籤佔據整個列表項容器空間，那麼你就需要做這種方式：

$('.nav li a').click(function() { 
    $('.nav li').removeClass('active'); 
    $(this).parent().addClass('active'); 
});