jquery - rel 和 href 匹配

Question

http://jsfiddle.net/aprWP/

<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 应切换类“活动”。

尝试了很多东西，但无法让它工作。

谢谢

Answer 1

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

$(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("#", "")部分。

Answer 2

使用悬停事件和切换类的组合：

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

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

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

Answer 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/

Answer 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/

Answer 5

Try this code:

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