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小提琴：https://jsfiddle.net/5zmcn3h2/10/

jQuery扩展我的垂直标签

1 个答案: