Добавить класс 'active' для отображения списка

Question

Я создал форму, которая разбита на четыре части, используя сценарий jQuery, который я нашел здесь в SO. Когда пользователь закончит заполнять одну часть формы, он нажимает «Далее» и переходит к следующей части формы или нажимает «назад», чтобы вернуться к предыдущей части.

Я хотел бы добавить упорядоченный список выше формы, которая имеет название четырех частей формы и добавляет «активный» класс в li 1, когда пользователь просматривает форму 1, «активный» класс на li 2, когда пользователь просматривает форму 2 и т. д.

Я не специалист по jQuery, поэтому не уверен, как это сделать. Может кто-то указать мне верное направление?

Вот упорядоченный список:

<ol> 
    <li class="active">Part 1</li> /* 'active' when user is viewing part 1 */ 
    <li>Part 2</li> 
    <li>Part 3</li> 
    <li>Part 4</li> 
</ol> 

Вот скрипт JQuery:

var tab_pool = ["form-part-1", "form-part-2", "form-part-3", "form-part-4"]; 
    var visible = $(".tab:visible").attr('class').split(" ")[1]; 
    var curr_ind = $.inArray(visible, tab_pool); 
    $(".submit").hide(); 
    $(".back").hide(); 

    var validator = $('form').validate({ 
    ignore: 'input[type="button"],input[type="submit"]', 
    }); 

    $('.next').click(function() { 
     var tab = $(".tab:visible"); 

     var valid = true; 
     $('input', tab).each(function(i, v){ 
      valid = validator.element(v) && valid; 
     }); 

     if(!valid){ 
      return; 
     } 

     if (curr_ind < 3) { 
      $(".tab:visible").css({position:"absolute",left:"-9999px"}).animate({left: -9999}); 
      curr_ind = curr_ind + 1; 
      $("." + tab_pool[curr_ind]).css({position:"static",left:"auto"}).animate({left: 0}); 
      $(".submit").hide(); 
      $(".back").show(); 
     } 
     if (curr_ind == 3) { 
      $(".submit").show(); 
      $(".next").hide(); 
     } 
    }); 

    $('.back').click(function() { 
     if (curr_ind > 0) { 
      $(".tab:visible").css({position:"absolute",left:"-9999px"}).animate({left: -9999}); 
      curr_ind = curr_ind - 1; 
      $("." + tab_pool[curr_ind]).css({position:"static",left:"auto"}).animate({left: 0}); 
      $(".submit").hide(); 
      $(".next").show(); 
     } 
     if (curr_ind == 0) { 
      $(".back").hide(); 
     } 
    }); 


}); 

Answer 1

В обоих ваших следующих и обратно функций щелчка, добавьте следующие строки в конце каждого:

$('li').removeClass('active').eq(curr_ind).addClass('active');