我一直在尝试使这段代码工作一段时间，现在无法弄清楚出了什么问题。它用于图像的三态翻转。 （我知道我可以使用CSS做到这一点，所以请不要对此作答。）目标是，我正在尝试学习jquery，作为学习的一部分，我试图弄清楚我在这里缺少的内容。
我遇到的问题是，当您执行鼠标悬停和鼠标移出事件时，按钮会正确突出显示。但是，当我单击一个按钮，然后单击另一个按钮时，我单击的所有按钮都保持打开状态。我需要能够像单击典型的标签控件一样，在单击每个图像时切换状态。
我知道有更好的方法可以做到这一点，但是我确实在尝试学习我做错了什么，我感到非常沮丧。因此，如果有任何人可以帮助专门修复我发布的代码，我将非常感激。同样，我知道可以使用某些CSS技术来完成此操作，但是我想了解我在这里做错了什么。
<script>
$(document).ready(function () {
var clicked_obj;
$("#nav a").mouseover(function () {
if ($(this).data("clicked")) { return; }
$(this).children("img").each(function () {
this.src = $(this).attr("src").replace(/_off.gif$/ig, "_on.gif");
});
}).mouseout(function () {
if ($(this).data("clicked")) { return; }
$(this).children("img").each(function () {
this.src = $(this).attr("src").replace(/_on.gif$/ig, "_off.gif");
});
}).click(function () {
if (clicked_obj) {
$(clicked_obj).removeData("clicked").mouseout();
}
clicked_obj = this;
$(this).data("clicked", true);
$(this).children("img").each(function () {
this.src = $(this).attr("src").replace(/_off.gif$/ig, "_clk.gif");
});
});
});
</script>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<head>
</head>
<body>
<div id="nav">
<div id="logo"><img src="images/inbox_wrilogo.gif" width="143" height="30" alt="logo" border="0" /></div>
<div id="tab"><a href="#"><img src="images/nav_support_off.gif" width="75" height="22" alt="Support" name="support" border="0" /></a></div>
<div id="tab"><a href="#"><img src="images/nav_acct_off.gif" width="75" height="22" alt="My Account" name="acct" border="0" /></a></div>
<div id="tab"><a href="#"><img src="images/nav_inbox_off.gif" width="75" height="22" alt="Inbox" name="inbox" border="0" /></a></div>
</div>
</body>
</html>
您必须完全按照自己的想法去做：）（jquery的美丽之处：）...单击新按钮时，从先前单击的按钮中删除选定的状态。...这是一个使用样式而不是图像，但是您应该可以将添加/删除类更改为更改图像
var sel;
$(document).ready(function() {
$("#nav a")
.mouseover(function() {
$(this).addClass("mouseOver");
})
.mouseout(function() {
$(this).removeClass("mouseOver");
})
.click(function() {
if( sel != null ) {
$(sel).removeClass("selected");
}
$(this).addClass("selected");
sel = this;
});
});