用jquery丢失css

Csshover正常工作,直到单击其中一个菜单项。 我相信问题始于我添加了这一行

$("#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

 

Account Settings

Lorem ipsum dolor sit amet, consectetuer adipiscing

Something

Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.

Messages

Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.

脚本

   $("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); });  

设置内联的CSS将优先于样式表 – 所以请尝试切换类。

我不确定你想要实现什么,所以addClass(),removeClass()或toggleClass()的某些组合将起到作用。

这是你想要的 – 工作演示

 $(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()和hide() jQuery命令只接受两个参数,速度和回调。 你有一个字符串动画名称,一个对象和一个数字作为参数。