jQuery扩展了我的垂直选项卡

jQuery extending my vertical tabs

本文关键字：选项 垂直 我的 扩展 jQuery      更新时间：2023-09-26

我是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));

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

$(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/

相关文章：