Jquery,用户交互:悬停链接以突出显示项目组合

时间:2011-05-11 11:24:31

标签: javascript jquery html arrays user-interaction

JS Fiddle (code)

这是我为学习数组而设置的更多任务,但现在我想知道你们中是否有人能想到更清洁的方式来完成这项任务。我只想要一个项目列表,突出显示用户将鼠标悬停在某些链接上时。

我想做什么

我有一个项目列表,我可以在SEO,Develpment或Design上完成每个项目。在页面上还有一个链接列表说:设计,开发和搜索引擎优化。当悬停在链接上时,我想要一些项目突出显示..(组合)。因此,我可能会完成一项任务的一些项目将突出显示多个链接.....

我目前是如何尝试这样做的

我认为我可以创建一个带有项目开关列表的二维数组。根据您在悬停的链接中拉出正确的数组,如果您看到JSfiddle链接,那就是我可以去的地方。

非常相似的例子

ID Design

感谢您提供帮助或建议

我希望我能清楚地解释一下,我知道我可以将代码链接掉以获取示例链接,但我宁愿学习,只需剪切并粘贴...... - 看看其他人的想法和用法jquery的。

1 个答案:

答案 0 :(得分:1)

您可以为每个项目使用3种不同的样式,例如:“。design”,“。seo”,“。development”

$("#link1").hover(
  function ()
  {
    $(".design").each(function()
    {
        $(this).toggleClass("highlight");
    });
  },
  function ()
  {
    $(".design").each(function()
    {
        $(this).toggleClass("highlight");
    });
  }
);

说明: 当鼠标悬停在link1上时,在使用.design类的元素上切换一个类.highlight(在鼠标悬停时添加鼠标悬停时添加).highlight。您可以采用与其他2类相似的方式。