Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140161

jQuery self made tabs plugin problems

$
0
0

I tried to make a small tab plugin and used code from some learning site I don't remember. Problem: when I initialize plugin 2 times on a page it works at both places same time. Here's a pen with a complete case: https://codepen.io/leshiq/pen/XWJjmxy

Here's plugin's code:

(function($){       
  jQuery.fn.lightTabs = function(options){

    var createTabs = function(){
      tabs = this;
      i = 0;
      if ($(tabs).children().first().children().length < 2) {
        tabs_list = $(tabs).children().first().children().children();
      } else {
        tabs_list = $(tabs).children().first().children();
      }
      console.log(tabs_list);
      showPage = function(i){
        $(tabs).children().last().children().hide();
        $(tabs).children().last().children().eq(i).show();
        tabs_list.removeClass("active");
        tabs_list.eq(i).addClass("active");
      }

      showPage(0);
      console.log($(tabs).children().last().children());

      tabs_list.each(function(index, element){
        $(element).attr("data-page", i);
        i++;                        
      });

      tabs_list.click(function(){
        showPage(parseInt($(this).attr("data-page")));
      });       
    };    
    return this.each(createTabs);
  };  
})(jQuery);

Viewing all articles
Browse latest Browse all 140161

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>