3

我是 jquery 的菜鸟，并且一直在努力让以下工作变得沮丧。我敢肯定，经验丰富的开发人员会立即上手，这很简单。

我在 1 个列表中有一个菜单，在页面上的其他 div 中有一个列表。当用户将鼠标悬停在菜单上时，列表中的项目将被突出显示。我已经走到这一步了。但是因为列表很长，所以我需要一个点击事件来在用户向下滚动页面时突出显示这些项目。

没关系。但是，当用户在菜单中的下一个项目上移动时，我无法弄清楚如何从突出显示的项目中删除点击类。 

$('#buttons li').hover(function () {
    $('.item-' + this.className).addClass('clients-hover');
},
function () {
    $('.item-' + this.className).removeClass('clients-hover');
});
$(function() {
  $('#buttons li').click(function() {
    $(this).addClass('clients-hover');
  });
});

例如，在下面的小提琴中，当用户悬停或单击 Artists/Bands 时，div 中的项目会亮起，但是当用户将鼠标悬停在 Comedians 上时，该类中的项目会突出显示，并且 Artists/Bands 会恢复正常。

http://jsfiddle.net/toddyhotpants/RCMaP/4/

这是页面上的（没有点击事件）： http ://whitesky.com.au/clients/

提前致谢。

4

4 回答 4

3

只需删除clients-hover单击元素的其他兄弟姐妹的类：

$(this).addClass('clients-hover').siblings().removeClass('clients-hover');

演示：http: //jsfiddle.net/RCMaP/6/

根据您的评论，只需将鼠标悬停在菜单导航上时修改您的代码：

$('#buttons li').hover(function () {
    $('.item-' + this.className).addClass('clients-hover')
    .parent().siblings().children().removeClass('clients-hover');
},

function () {
    $('.item-' + this.className).addClass('clients-hover');
});

演示：http: //jsfiddle.net/RCMaP/12/

于 2013-04-01T08:12:11.997 回答
0

使用$.toggleClass()而不是 $.addClass() :)

小提琴！

于 2013-04-01T08:11:42.633 回答
0

用于siblings()在点击事件中删除其他类..更新了一些代码..您不需要两个 document.ready 功能....

尝试这个

$('#buttons li').hover(function () {
   $("div[class^='item']").removeClass('clients-hover'); //<--here removesclass from all div
    $('.item-' + this.className).addClass('clients-hover');
},

$(function () {
  $('.item-' + this.className).removeClass('clients-hover'); // moved for other document.ready function 
  $('#buttons li').click(function () {
    $(this).siblings().removeClass('clients-hover'); //<--- here remove class from other li 
    $(this).addClass('clients-hover');
  });
});

在这里摆弄

于 2013-04-01T08:18:41.657 回答
0

像这样的东西？

$('#buttons li').hover(function () {
    $('.item-' + this.className).addClass('clients-hover');
    },
    function () {
    $('.item-' + this.className).removeClass('clients-hover');
});

$(function() {
   $('#buttons li').click(function() {
      $("[class^=item]").not($('.item-' + this.className)).removeClass('clients-hover');
      $(this).addClass('clients-hover');
      $(this).siblings().removeClass('clients-hover');
      $('.item-' + this.className).addClass('clients-hover');
   });
});
于 2013-04-01T08:21:29.803 回答