JQuery extending my vertical tabs

Im new for jQuery and want to make it a little cleaner as well as add functionality, but not sure how to do it, so I was hoping someone could give me a hand.

tabs (working) for now

$(".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();
});

Currently it only works on the click event, but you want to add something so that I can add automatic tab changes, for example using

hokTabs.pause ();

etc. This is basically when you hover iutem, it will stop and start again when you hover a button.

Does anyone have any idea?

   // 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));
+4
source share
1 answer

These are simple start and stop functions, you simply associate them with hover events:

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

0

Source: https://habr.com/ru/post/1621126/


All Articles