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应该切换类'active'。

尝试了很多事情，却无法让它发挥作用。

由于

Answer 1

这很好，也很容易。使用.hover()上的a事件，从href的{{1}}属性创建课程，然后就可以了：

请注意，您需要从$(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部分。

Answer 2

使用悬停事件和toggleClass的组合：

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

试试这段代码：

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

rel和href匹配

5 个答案: