rel 和 href 匹配答案

【问题标题】：rel and href matchrel 和 href 匹配
【发布时间】：2011-09-13 14:56:29
【问题描述】：

<a href="#numtag-1">One</a>
<a href="#numtag-2">Two</a>
<a href="#numtag-3">Three</a>

<div class="numtag-1">One</div>
<div class="numtag-2">Two</div>
<div class="numtag-3">Three</div>

.. 悬停时，适当的 div 应该切换类“活动”。

尝试了很多东西，但无法让它发挥作用。

谢谢

【问题讨论】：

不清楚你想将鼠标悬停在什么上面。
顺便说一句，你到底尝试了什么？

标签： jquery href rel

【解决方案1】：

结合使用悬停事件和toggleClass：

$('a').hover(function() {
    $('div.' + $(this).attr('href').substring(1)).toggleClass('active');
});

http://jsfiddle.net/aprWP/7/

更改为使用子字符串，因为我认为这是一种更好的方法。

【讨论】：

我喜欢短代码。短是好的。（不过，我会使用.slice(1) 而不是.replace('#','')。）

【解决方案2】：

这很好也很容易。使用a 上的.hover() 事件，从a 的href 属性创建类，就在这里：

$(document).ready(function() {
    $("a").hover(function() {
        var str = $(this).attr("href").replace("#", "");

        $("div." + str).addClass("active");
    }, function() {
        var str = $(this).attr("href").replace("#", "");

        $("div." + str).removeClass("active");
    });
});

请记住，您需要从href 属性中删除#，因此需要删除.replace("#", "") 部分。

【讨论】：

不需要两个功能。只需使用一个和 toggleClass。但是无论如何+1，因为它有效。
如果要在鼠标离开时删除类，需要两个函数。如果如您所说，您只想在鼠标进入a 时切换一个类，那就可以了。

【解决方案3】：

$(document).ready(function() {      
    $('a').hover(function() {
        var selector = 'div.' + $(this).attr('href').substr(1);
        $(selector).addClass('active');
    }, function() {
        var selector = 'div.' + $(this).attr('href').substr(1);
        $(selector).removeClass('active');
    });
});

http://jsfiddle.net/aprWP/3/

【讨论】：

【解决方案4】：

试试下面的

$(document).ready(function() {
    $('a').hover(function() {
       var id = $(this).attr('href').substring(1);
       $('.' + id).addClass('active'); 
    }, function() {
       var id = $(this).attr('href').substring(1);
       $('.' + id).removeClass('active');        
    });
});

JSFiddle - http://jsfiddle.net/aprWP/4/

【讨论】：

【解决方案5】：

试试这个代码：

$(document).ready(function() { 
    $('a').hover(function(){    
      var url = $(this).attr('href'); 
      var className = url.substring(1); 
      $('div.' + className).toggleClass('active'); 
    }); 
});

【讨论】：