使用jQuery根据所关注的锚点将类添加到父div

Question

我有一个锚点列表，我希望他们根据当前关注的锚点将唯一的类添加到特定的div ID。我有它用于锚点悬停，但是我很难弄清楚如何也可以进行锚点聚焦。我想实现锚点焦点，以便即使有人通过键盘在锚点上导航，他的课程仍会添加到div ID中。

这是悬停类的代码（可能需要清理）。如果锚点具有焦点（不仅仅是悬停），我需要将这些类（每个锚点唯一）添加到#industries div中。

HTML结构：

<div id="industries" class="et_pb_section">
    <div class="et_pb_row">
        <div class="et_pb_column">
            <div id="industries-list" class="et_pb_module">
                <div class="et_pb_text_inner">
                    <ul>
                        <li><a href="#education">Education</a></li>
                        <li><a href="#energy">Energy</a></li>
                        <li><a href="#healthcare">Healthcare</a></li>
                    </ul>
                </div>
            </div> <!-- .et_pb_text -->
        </div> <!-- .et_pb_column -->
    </div> <!-- .et_pb_row -->
</div> <!-- .et_pb_section -->

jQuery代码：

(function ($) {

    $(document).ready(function () {
        industriesBackgrounds();
    });

    function industriesBackgrounds() {
        $('#industries-list [href="#education"]').hover(function(){     
            $('#industries').addClass('industry-education-hover');    
        },
        function(){    
            $('#industries').removeClass('industry-education-hover');     
        });
        $('#industries-list [href="#energy"]').hover(function(){     
            $('#industries').addClass('industry-energy-hover');    
        },
        function(){    
            $('#industries').removeClass('industry-energy-hover');     
        });
        $('#industries-list [href="#healthcare"]').hover(function(){     
            $('#industries').addClass('industry-healthcare-hover');    
        },
        function(){    
            $('#industries').removeClass('industry-healthcare-hover');     
        });
    }

})(jQuery);

更新：

现在，通过将代码添加到我的industriesBackgrounds函数中，我可以进行这种工作。

$('#industries').delegate( '#industries-list a[href="#education"]', 'focus blur', function() {
    var anchor = $( this );
    setTimeout(function() {
        $('#industries').toggleClass( 'industry-education-focus', anchor.is( ":focus" ) );
    }, 0 );
});
$('#industries').delegate( '#industries-list a[href="#energy"]', 'focus blur', function() {
    var anchor = $( this );
    setTimeout(function() {
        $('#industries').toggleClass( 'industry-energy-focus', anchor.is( ":focus" ) );
    }, 0 );
});
$('#industries').delegate( '#industries-list a[href="#healthcare"]', 'focus blur', function() {
    var anchor = $( this );
    setTimeout(function() {
        $('#industries').toggleClass( 'industry-healthcare-focus', anchor.is( ":focus" ) );
    }, 0 );
});
我不确定这是否是最好的解决方法。但是，由于从技术上讲，用户可以将一个锚定为焦点，而将光标悬停在另一个锚上，则最好使用2个单独的类（一个用于焦点，另一个用于悬停）来确定发生的真正“事件”。] >
但这是编码这两个状态的最佳方法吗？是否有一种更干净的解决方案来实现将类添加到ID（用于悬停和关注）的目标？

我有一个锚点列表，我希望他们根据当前关注的锚点将唯一的类添加到特定的div ID。我可以将其用于锚点悬停，但是我很难过...

Answer 1

您可以通过组合选择器和事件委托来缩短代码。 .hover()是mouseenter mouseleave的简写：

如果我有一个可行的例子，我会提供更多建议。