3

我有一个菜单，每个菜单项都是一个跨度，在 css 中设置了一个类：

.newClass {color: red}

.oldClass {color:black} oldClass:hover {color:blue;}

当您单击一个菜单项时，该类将更改为： $(this).removeClass('oldClass').addClass('newClass'); 工作正常。

单击另一个 menuItem 时，我将类更改回当前菜单项： $(this).removeClass('newClass').addClass('oldClass');

问题是当类被改回时，直到我将鼠标悬停在菜单项上才反映更改。因此，菜单项颜色保持红色，直到我将其鼠标悬停，然后它变回黑色并带有蓝色悬停。

请参阅评论中 Gaby 的示例以了解应该发生的情况

这是我的实际代码：

$('.headingRev').removeClass('headingRev').addClass('heading');
$(this).removeClass('heading').addClass('headingRev');

这是CSS：

.heading {color: #bb1f1a;}
.heading:hover {color: #e9b49e;text-decoration:none;}
.headingRev {color: #e9b49e;}

4

2 回答 2

1

一个可能的问题可能是您从当前菜单项中删除选择的方式..

this如果您是从单击内部执行此操作，则不应使用，因为this它将指向单击的元素，而不是先前当前的元素。如果是这种情况，则应使用$('.newClass').removeClass('newClass').addClass('oldClass');

在http://www.jsfiddle.net/khGRW/上查看一些有效的代码

更新

我现在看到了..您正在使用 Cufon，它将文本替换为图像或画布元素..

这使它无法响应正常的 DOM 更改。

您需要Cufon.refresh('#content')在将类更改为元素（当前不在hover事件下）之后调用 ，以强制它根据 DOM 的当前状态重新绘制菜单。

效果会自动处理，hover因为它们支持该选项，但这就​​是 DOM 监控从 Cufon 端结束的地方。

于 2010-10-13T01:53:01.770 回答
0

试试这个方法：

<ul>
<li class="ordinary">Menu 1</li>
<li class="ordinary">Menu 2</li>
<li class="ordinary">Menu 3</li>
</ul>

$('ul li').click(function(){
  $('ul li').removeClass("highlight").addClass("ordinary");
  $(this).removeClass("ordinary").addClass("highlight");
});
  1. 单击菜单项时，将所有菜单项设为普通类
  2. 将点击的菜单设为高亮类
于 2010-10-14T00:08:58.297 回答