Цвет
blue
указывает, что цвет .active
, цвет red
- .step-done
, а цвет green
- обычный цвет без какого-либо дополнительного класса.
Добавить событие click только на li.active
, например .nav-tabs li.active a
. $(this).parent()
означает текущий родительский тег, который является li
, потому что обработчик события имеет место на якоре a
и использует .next()
, чтобы найти следующего родственника текущего элемента. Для более подробной проверки jQuery .next ()
Пожалуйста, проверьте ниже фрагмент кода:
$(document).on('click', '.nav-tabs li.active a', function() {
$(this).parent().removeClass("active");
$(this).parent().addClass("step-done");
$(this).parent().next().addClass('active');
});
.nav-tabs {
list-style: none;
}
.nav-tabs li {
display: inline-block;
background: #5fba7d; // green color
margin: 0 10px;
padding: 10px;
color: white;
}
.nav-tabs li a {
cursor: pointer;
}
li.active {
background: #0095ff; // blue color
}
li.step-done {
background: #dc3d4c; // red color
}