rel и href match

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

Использование комбинации события при наведении и toggleClass:

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

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

Изменено использование подстроки, так как я считаю, что это лучший способ сделать это.

Answer 2

Это красиво и просто. Используйте событие .hover() для a, создайте класс из href атрибута a, и вот оно у вас:

$(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 3

Попробуйте этот код:

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

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

$(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/