Question

我正在研究page。当用户向下滚动到选项卡（“现有工作流程”和“KBCT工作流程”）时，我想将“现有工作流程”选项卡更改为仅具有5秒延迟的“KBCT工作流程”选项卡。只有当选项卡可见时（用户滚动到该位置）才需要执行此操作。

这是代码

tabs = jQuery('#kbct-tabs');
kbctTab = tabs.find('.tab:last-child');

if (tabs.css('visibility') === 'visible') {
  setTimeout(function() {
    kbctTab.click();
    console.log('executed');
  }, 5000);
}

我不知道它有什么问题，特别是if语句。它有效，但不是它应该如何。似乎浏览器忽略if语句并在页面加载后开始计数5秒，而不是在用户滚动到选项卡时。但是，当我在Chrome控制台中编写if语句时，它的工作方式就像它应该的那样。

这是screenshot。

你能告诉我有什么问题吗？

Answer 1

您的代码100％正常运行。

你只需改变两件事：

1 - 添加scroll事件监听器（element.scroll(callback)）

2 - 使用scrollTop属性进行可见性检查。（element.scrollTop()）

 var kbctworkflow = function () {
    var tabs = jQuery('#kbct-tabs');
    var kbctTab = tabs.find('.tab:last-child');
    if ($(document.body).scrollTop() > tabs.offset().top - 300) {
      setTimeout(function() {
        kbctTab.click();
        console.log('executed');
      }, 1000);
    }
  };
  $(window).scroll(kbctworkflow);

DEMO http://jsbin.com/qatice/2/edit?js,output

Answer 2

尝试使用jquery＆＃39; is选择器。

tabs = jQuery('#kbct-tabs');
kbctTab = tabs.find('.tab:last-child');

if (tabs.is(':visibile')) {
  setTimeout(function() {
    kbctTab.click();
    console.log('executed');
  }, 5000);
}

Chrome会忽略我的if语句

2 个答案: