質問
CSS ホバーは、メニュー項目のいずれかがクリックされるまで正しく機能します。この行を追加したことから問題が始まったと思います
$("#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 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>
解決
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;
});
});
の 見せる() そして 隠れる() jQuery コマンドは、速度とコールバックの 2 つのパラメータのみを取ります。引数として文字列アニメーション名、オブジェクト、数値を指定しました。
所属していません StackOverflow