adding classes to div according to it's number with javascript

adding classes to div according to it's number with javascript

I am using touchSlider plugin for sliding content on mobile: https://www.mobilizetoday.com/freebies/touchslider

Below is my code that I am using to slide my content, which is 3 pictures, either by sliding with my finger, or by clicking on the big circles below my slider ( #tabs2 ). in my current code, when a #tabs2is active, .active class is added to it. That is the code for active class:

 
    
  
  1. #tabs2 a.active {
    2. 
  
  2.  background-color: #87c654;
    3. 
  
  3. }
    4. 
 

 

  
What I want to do is, each #tabs2, when active, takes a certain color. Since I have 3 #tabs2, I want to make 3 classes, .active1, .active2 and .active3. 

  
in my javascript code, the variable i determines the number of #tabs2 that I have. I want to add a condition that says: if(i=1){...addClass('active1')}, and same for i==2 and i==3

  
JS code:

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

    3. 
    
  3.  $('#gallery2').touchSlider({
    4. 
    
  4.  mode: 'index',
    5. 
    
  5.  center: true,
    6. 
    
  6.  single: true,
    7. 
    
  7.  onChange: function(prev, curr) {
    8. 
    
  8.  $('#tabs2 a.tablink').removeClass('active');
    9. 
    
  9.  $('#tabs2 a.tablink').filter(function(i){return i == curr}).addClass('active');
    10. 
    
  10.  },
    11. 
    
  11.  onStart: function() {
    12. 
    
  12.  var count = $('#gallery2').get(0).getCount();
    13. 
    
  13.  $('#tabs2').html('');
    14. 
    
  14.  for (var i = 0; i < count; i++) {
    15. 
    
  15.  var el = $('<a href="#" class="tablink">'+(i+1)+'</a>');
    16. 
    
  16.  el.attr('index', i);
    17. 
    

    18. 
    
  18.  $('#tabs2').append(el);
    19. 
    

    20. 
    
  20.  el.bind('click', function(){
    21. 
    
  21.  $('#gallery2').get(0).moveTo($(this).attr('index'));
    22. 
    
  22.  return false;
    23. 
    
  23.  });
    24. 
    
  24.  }
    25. 
    
  25.  }
    26. 
    
  26.  });
    27. 
    
  27.  });
    28. 
   

   

    So how is it possible to do that? what code should i add?
   

   

    

   

   

    
------EDIT-------

    
my html code, when loaded in the browser:


    
     
    
      
  1. <div id="tabs2">
    2. 
      
  2.  <a href="#" class="tablink active" index="0">1</a>
    3. 
      
  3.  <a href="#" class="tablink" index="1">2</a>
    4. 
      
  4.  <a href="#" class="tablink" index="2">3</a>
    5. 
      
  5. </div>
    6. 
     


    
All i have in my code is: <div id="tabs2"></div>

    
Javascript is adding the rest one my page is loaded.