如何在單擊李元素時添加「活動」類並同時將其從其他元素中移除？

Question

我試圖創建一個菜單，我想在點擊時改變li元素的CSS，同時其他li的CSS應該保持不變。

我的菜單是：

<ul id="menu"> 
    <li><a href="#">Parent 1</a> </li> 
    <li><a href="#">item 1</a></li> 
    <li><a href="#">non-link item</a></li> 
    <li><a href="#">Parent 2</a> </li> 
</ul> 

和我的jQuery添加CSS到選定的元素是：

$("#menu li a").click(function() { 
    $(this).parent().addClass('selected'); 

    }); 

但是，現在，我無法從非刪除已添加CSS選定的元素。無論如何，我可以執行此操作嗎？

Answer 1

試試這個

$("#menu li a").click(function() { 
    $(this).parent().addClass('selected').siblings().removeClass('selected'); 

    }); 

DEMO

Answer 2

$("#menu li a").click(function(){ 
    // Remove active if this does not have active class 
    if(!($(this).closest("li").hasClass("active"))){ 
     $(this).closest("#menu").find("li.active").removeClass('selected'); 
    } 
    $(this).closest("li").addClass('selected'); 
}); 

Answer 3

您可以定位.siblings()

$("#menu li a").click(function() { 
    $(this).parent().addClass('selected').siblings().removeClass('selected'); 
}); 

Answer 4

試試這個

$("#menu li a").click(function() { 
    $("#menu li").removeClass('selected'); 
    $(this).parent().addClass('selected'); 
}); 

DEMO

Answer 5

或爲自由JavaScript的方法，您可以使用單選按鈕：

http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/

，並使用兄弟選擇到他們的風格

input[type='radio']:checked + label 

DEMO

Answer 6

試試這個，這將始終工作

$("#menu li a").on('click', function(e){ 
    $("#menu .active").removeClass('active'); 
    $(this).parent().addClass('active'); 
    e.preventDefault(); 
});