Question

我正在尝试在我的网站上禁用JQuery标签的键盘导航。

我已尝试过此问题中列出的所有内容：Prevent default jquery-ui tab behaviour when using keyboard navigation

但无济于事。

我目前的代码是（是的，它看起来很吵，但我很绝望，我也是JS的菜鸟）

$.widget( ".wpb_tabs, .wpb_tab, .wpb_tab a, .wpb_tour_tabs_wrapper", $.ui.tabs, {
options: {
  keyboard: true
},
_tabKeydown: function(e) {
  if(this.options.keyboard) {
    this._super( '_tabKeydown' );
  } else {
    return false;
  }
}
});

jQuery('.wpb_tabs, .wpb_tab, .wpb_tab a, .wpb_tour_tabs_wrapper').tabs({
activate: function(e, ui) {
e.currentTarget.blur();
}
});

我的网站（页面即时推荐）：http://safercareltd.com/care-and-advice/

链接到调用标签功能的JS： http://safercareltd.com/wp-content/plugins/js_composer/assets/js/js_composer_front.js

对于我所做错的任何帮助都将不胜感激。

Answer 1

我必须自己做。这对我有用：

$.widget("ui.tabs", $.ui.tabs, {
    _tabKeydown: function (event) {
        if (event.keyCode !== 38 && event.keyCode !== 40) {
            this._super(event);
        }
    }
});

您可以使用event.keyCode替换任意组合键，甚至可以使用以下内容进行自定义：

$.widget("ui.tabs", $.ui.tabs, {
    options: {
        overrideKeyCodes: [],
    },
    _tabKeydown: function (event) {
        var isOverride = false;
        if (Object.prototype.toString.call(this.options.overrideKeyCodes) === '[object Array]') {
            for (i = 0; i < this.options.overrideKeyCodes.length; i++) {
                if (event.keyCode === this.options.overrideKeyCodes[i]) {
                    isOverride = true;
                    break;
                }
            }
        }

        if (!isOverride) {
            this._super(event);
        }
    }
});

$('#MyTabs').tabs({ overrideKeyCodes: [ 38, 40 ] });

Answer 2

我创建了一个jsfiddle。这是你正在做的事情的一种解决方法。这是链接：http://jsfiddle.net/lotusgodkk/GCu2D/15/

修饰：

$('#tabs').tabs({
    activate: function (event, ui) {
        ui.newTab.blur();
    },
});
$('#tabs a').click(function () {
    $(this).blur();
});

根据你的html结构：

    $('.wpb_wrapper').tabs({
    activate: function (event, ui) {
        ui.newTab.blur();
    },
    });
   $('.wpb_tabs_nav a').click(function () {
      $(this).blur();
  });

以下是您的网站内容和标签的另一个小提琴：http://jsfiddle.net/lotusgodkk/GCu2D/17/

Answer 3

另一个解决方案是取消绑定li上的keydown事件。

var currentBusinessData
var currentBusiness = firebase.database().ref("business/" + businessKey)
  currentBusiness.on('value', (snapshot) => {
    currentBusinessData = snapshot.val()        
    this.setState({isLoading: false})
  });

禁用JQuery Ui选项卡键盘导航

3 个答案: