Mudando classe com simplicidade

[di-Areia 0]

Opa galera beleza?

Bom, eu tenho feito alguns testes pra um menu que eu estou desenvolvendo utilizando CSS e jQuery.

Esse menu é composto por uma <ul> com elementos <li> dentro, sendo que esses elementos <li> tem classe ou nula ou "selected" de forma que quando a classe for selected o item que foi clicado adquire propriedades de css diferentes.

Supondo que eu tenha o seguinte:

<ul id="menu">
    <li id="bt1" class="selected"><a href="home.html">Botao 1</a></li>
    <li id="bt2" class=""><a href="">Botao 2</a></li>
    <li id="bt3" class=""><a href="">Botao 3</a></li>
    <li id="bt4" class=""><a href="">Botao 4</a></li>
</ul>
<div id="content"></div>

 

Sendo que dentro dessa div CONTENT coisas diferentes surgirão de acordo com o "botão" que foi clicado do menu.

 

Eu posso fazer via jquery pra cada botão um script que remove a classe selected dos adjacentes e adiciona a classe selected no que foi clicado, por exemplo:

 

$("#bt1").click(function(){
if($(this).hasClass("selected")){
alert("ja tem classe"); //Esse alert é só para testar o script
} else {
$(this).addClass("selected")
$("#bt2,#bt3,#bt4").removeClass("selected")
}

});

$("#bt2").click(function(){
if($(this).hasClass("selected")){
alert("ja tem classe"); //Esse alert é só para testar o script
} else {
$(this).addClass("selected")
$("#bt1,#bt3,#bt4").removeClass("selected")
}

});

 

E assim por diante, mas o código não fica limpo. E eu teria muito mais blocos de cógido caso o menu fosse maior.

 

Então comecei a pensar da seguinte forma:

$("#menu").on("click","li", function(e){
    e.preventDefault();
    
    if($(this).hasClass('selected')){
        alert("ja tem classe");
    } else {
      $(this).toggleClass("selected");
        
        
    }
});

 

Bom, ele funciona em partes. Quando eu inicio a página, o Botão 1 já estará selecionado(seria a home), quando eu clico no BT2, ele também pega a classe selected e fica selecionado. O problema é que eu precisaria então, ao clicar em um botão, remover a classe dos outros e não sei como fazer isso... Alguém consegue me ajudar?

 

Desde já eu agradeço.

 

PS: O código CSS

#menu{
    float:left;
    border:black thin solid;
}
#menu li {
    display:inline-block;
    margin-left:10px;
}
#menu li a{
    text-decoration:none;
}
#content{
    float:left;
    clear:both;
    width:300px;
    height:300px;
    border:black thin solid;
}
#menu li.selected{
    background:red;
}

 

 

[rodrigopa 7]

$('#menu').find('li').click(function() {

$('#menu').find('li').removeClass('selected');

$(this).addClass('selected');

});

[di-Areia 0]

hmmm valeu ! (: