jQuery允许滚动各种LI元素

我在HTML/jQuery中创建了一个功能区，可以在此处找到其实现：

在本机Office应用程序（Word、Excel、Powerpoint等）中，当您移动鼠标时，鼠标光标将放置在选项卡上，然后滚动显示下一个选项卡

通过javascript，我已经创建了一个API，允许我显示给定选项卡的选项卡内容：

EnableTabContents: function() {

// Start by deactiving every tab element on the page.
$("li[role=tab]").each(function(index) {
  $(this).removeClass("active");
  $(".contents", this).removeClass("active");
});

// Activate the tab which is requested.
$(this).addClass("active");
$(".contents", this).addClass("active");

// Return the "tab" element.
return $(this);
},

但是，现在我想实现基于滚动的标签激活

基本上，我有两个问题：

• 如何确定鼠标光标已放置在功能区上
• 如何在jQuery中仅当光标位于所需位置时才实现滚动事件

我知道jQuery中有mouseenter事件，但是在事件中设置事件处理程序不是很痛苦吗？ 或者，我可以设置一个变量，并在滚动事件中检查该变量是否具有适当的值

对于那些对项目感兴趣的人来说，它是开源的：

谢谢你的建议。

好的

经过一番探索，我找到了这个问题的答案。 对于不休息的人，以下是解决方案：

有一个名为的浏览器事件，它只在Firefox中有效。 幸运的是，还有一个替代活动，它支持谷歌浏览器和IE浏览器，名为

注意：在这两个事件中，滚轮的方向都是相反的，在DOMMouseScroll中，我们需要检查OriginaleEvent的细节是否大于0，以确定向下滚动。 在OnMouseWheel中，原始事件的wheelDelta应小于0，以标识向下滚动

Anyware，要在各个选项卡之间滚动，使用以下代码：

火狐：

    $("#ribbon").bind('DOMMouseScroll', function(e){
        if(e.originalEvent.detail > 0) {
            // Actives the tab that is the next element.
            var nextTab = $("li[role=tab].active").next();
            var attribute = $(nextTab).attr('role');

            if (attribute == 'tab') {
                $(nextTab).EnableTabContents();
            }

        }else {
            // Actives the tab that is the previous element.
            var previousTab = $("li[role=tab].active").prev();
            var attribute = $(previousTab).attr('role');

            if (attribute == 'tab' && !$(previousTab).hasClass('application')) {
                $(previousTab).EnableTabContents();
            }
        }

        //prevent page fom scrolling
        return false;
    }); 

对于Google Chrome和Internet Explorer（应该可以在Safari和Opera中使用，但我还没有测试过）：

$（“#ribbon”）.bind（'mousewheel'，函数（e）{
如果（e.originalEvent.wheelDelta<0）{
//激活下一个元素的选项卡。
var nextTab=$（“li[role=tab].active”）.next（）；
var属性=$（nextTab.attr（'role'）；
如果（属性=='tab'）{
$（nextTab.EnableTabContents（）；
}
}否则{
//激活上一个元素的选项卡。
var previousTab=$（“li[role=tab].active”）.prev（）；
var属性=$（previousTab）.attr（'role'）；
if（attribute=='tab'&&&！$（previousTab）.hasClass（'application'））{
$（previousTab）.EnableTabContents（）；
}
}
//防止页面fom滚动
返回false；
}); 

在我上面的示例中，您有一些额外的逻辑来确保我滚动到一个Tab元素，并且该元素不是application选项卡

你看，我正在使用EnableTabContents（）函数。这是我自己的函数，它是API的一部分，它只是设置了必要的可见或不可见元素，不，我不会在这里发布代码

---

我希望它能帮助将来的任何人：-）

您考虑过使用.mouseover（）吗？您可以创建一个鼠标悬停功能，当您将鼠标悬停在某个特定选项卡上时，该功能将显示/隐藏某些选项卡。我已经完成了，但我希望能够滚动该功能以隐藏元素或不隐藏元素。我也更新了这个问题。如果不是出于可读性和可维护性的原因，我会使用你提出的第二种方法。我只是不确定是否有一个滚动事件，如果元素实际上没有“滚动”，您可以附加到该事件。我认为当x或y位置有一个增量时，滚动事件就会触发。我想知道你是如何解决这个问题的。当我找到一个解决方案时，我会把它放在这里，所以一定要把这个问题标记为你最喜欢的：-）解决方案已经找到。我已经回答了我自己的问题。所以它迟早会对你有所帮助：-）太棒了，我今天学到了一些东西。使用不推荐使用的bind方法而不是on（）的原因是什么？并且，您是为了在回答中清楚起见将它们分成两个处理程序，还是将两个事件传递到同一个处理程序中都不起作用？顺便说一句，你应该把你的答案标记为正确。首先，我明天会接受我自己的答案，因为我必须等到那时。然后我不知道bind方法已被弃用（您在哪里找到的），所以我可能会将其更改为使用On（）方法。另外，我不知道可以将多个事件传递到单个事件处理程序中。我不太擅长jQuery。但谢谢你的评论。我可能会修改代码以包含您的注释。您知道，从技术上讲，bind并不是不推荐的。我说错了。它是不推荐使用的live方法，后来被删除。尽管如此，从1.7开始，on（）在文档中被描述为“首选”方法。可能是因为它不使用单独的方法（即live/delegate）处理委托，或者可能是b/c，它更接近于vanilla JS（onclick，onerror…）。是的，您可以像这样向它传递多个事件：$（'someselector'）。on（'click tap'，…事件名称只是空格分隔的。无论如何，我只是好奇，我觉得你的功能区很酷。祝你好运。感谢你提供的宝贵信息。如果你对我的功能区感兴趣，你可以在Github上查看源代码：但是，仍然有一些bug使文档完全W3C，但我正在处理它。如果你计划使用它，让我知道你对它的看法。

    $("#ribbon").bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
            // Actives the tab that is the next element.
            var nextTab = $("li[role=tab].active").next();
            var attribute = $(nextTab).attr('role');

            if (attribute == 'tab') {
                $(nextTab).EnableTabContents();
            }

        } else {
            // Actives the tab that is the previous element.
            var previousTab = $("li[role=tab].active").prev();
            var attribute = $(previousTab).attr('role');

            if (attribute == 'tab' && !$(previousTab).hasClass('application')) {
                $(previousTab).EnableTabContents();
            }
        }

        //prevent page fom scrolling
        return false;
    });