javascript - jQuery 扩展我的垂直标签

Question

我是 jQuery 的新手，想使它更简洁一些并添加功能，但不确定如何做，所以希望有人能帮助我。

到目前为止标签(工作)

$(".tabs-menu a").click(function(event) {
    event.preventDefault();

    $(this).parent().addClass("active");
    $(this).parent().siblings().removeClass("active");

    var tab = $(this).attr("href");

    $(".tab-content").not(tab).css("display", "none");
    $(tab).show();
});

目前只适用于点击事件，但想添加一些东西，这样我就可以添加自动更改标签，比如使用

hokTabs.pause();

等。这主要是为了当你悬停一个 iutem 时它会暂停并在你悬停按钮时重新开始。

有人有什么想法吗？

   // New Veritcal Tabs JS
(function (hokTabs, $) {

     var internal = '5000'; // Internal

    // start auto tabs
    hokTabs.start = function () {
        console.log('started');
}

// start auto tabs
hokTabs.stop = function () {
    console.log('started');
}

// start auto tabs
hokTabs.pause = function () {
    console.log('started');
}

}(window.hokTabs, jQuery));

Answer 1

这些是简单的启动和停止函数，您只需将它们链接到悬停事件即可:

$(document).ready(function($) {

    var activateTab = function(index) {
      var tab = $(".tabs-menu li:eq(" + index + ")"),
          tabContent = $(".tab div:eq(" + index + ")");

      tab.addClass("current");
      tab.siblings().removeClass("current");
      tabContent.siblings().css("display", "none");
      tabContent.show();
    }

    var automation = {
        start: function() {
            this.current = setInterval(function() {
                var currentIndex = $(".tabs-menu li.current").index(),
                    max = $(".tabs-menu li.current").parent().children().length;
                activateTab(currentIndex + 1 < max ? currentIndex + 1 : 0);
            }, 2000);
        },
        stop: function() {
            if (this.current) {
                clearInterval(this.current);
            }
        }
    }

    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        activateTab($(event.currentTarget).parent().index());
    });

    automation.start();
});

JS fiddle :https://jsfiddle.net/5zmcn3h2/10/