perder css pairar com jQuery

Question

Css foco está funcionando corretamente até que um dos itens de menu é clicado. Eu acredito que o problema começou com eu adicionei esta linha

$("#buttons li a:not(a." + target + ")").css("background-position","0 0");

CSS

#buttons {float:left;}
#buttons ul {list-style-type:none;cursor:pointer;overflow:hidden;}
#buttons ul  li {height:195px;width:40px;float:left}
#buttons a {display:block;height:195px;width:40px;border:none;cursor:pointer;}
#buttons a.settings:hover, #buttons a.duels:hover, #buttons a.messages:hover {background-position: -40px 0;}
#buttons a.settings {background:url(accountsettings.png)}
#buttons a.something {background:url(accountsomething.png)}
#buttons a.messages {background:url(accountmessages.png)}

#text{width:600px;height:199px;overflow:hidden;float:left;}
div#text div {width:600px;height:199px;float:left; margin-left:20px;}

HTML

<div id="buttons">
        <ul>
            <li><a class="settings"></a></li>
            <li><a class="something"></a></li>
            <li><a class="messages"></a></li>
        </ul>
    </div>

    <div id="text">
       <div id="settings">
          <h2>Account Settings</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
       </div>
       <div id="something">
          <h2>Something</h2>
          <p>Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.</p>
       </div>
       <div id="messages">
          <h2>Messages</h2>
          <p>Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.</p>
       </div>      
    </div>

SCRIPT

 <script language="javascript" type="text/javascript">

    $("div#text div:not(#settings)").hide();
    $("#buttons li a.settings").css("background-position", "-40px 0");

    $("#buttons li a").click(function(){
        var target = $(this).attr("class");
        $("#buttons li a:not(a." + target + ")").css("background-position","0 0");
        $(this).css("background-position", "-40px 0");
        $("#"+target).show("slide", { direction: "left" }, 500);
        $("#text div").not("#"+target).hide("slide", { direction: "right" }, 500);
    });

 </script>

Answer 1

Como definir a CSS inline terão precedência sobre sua folha de estilo -. Modo a tentar alternando uma classe em vez

Eu não sei o que você está tentando alcançar, de modo algum combinação de addClass (), removeClass () ou toggleClass () irá fazer o truque.

Answer 2

É isso que você queria - Demonstração de Trabalho

$(function() {

    $("div#text div:not(#settings)").hide();
    $("#buttons li a.settings").css("background-position", "-40px 0");

    $("#buttons li a").click(function(){
        var target = $(this).attr("class");
        $("#buttons li a:not(a." + target + ")").css("background-position","0 0");

        $(this).css("background-position", "-40px 0");
        $("#"+target).show("slow");
        $("#text div").not("#"+target).hide("slow");
        return false;
    });
});

show () e hide () jQuery comandos recebem apenas dois parâmetros, a velocidade e uma chamada de retorno. Você tinha um nome de animação corda, um objeto e um número como argumentos.