Добавить «активный» класс в список элементов

0

Я создал форму, которая разбита на четыре части, используя сценарий 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();
        }
    });


});
Теги:

1 ответ

1
Лучший ответ

В обеих функциях следующего и последующего щелчка добавьте в конце каждого из них следующее:

$('li').removeClass('active').eq(curr_ind).addClass('active');
  • 0
    отличный материал, большое спасибо!
  • 0
    Конечно, если вам нужно объяснение, дайте мне знать.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню