Поменяйте классы изображения по клику тега. JQuery

Question

Я работаю с JQuery и пытаюсь поменять стиль изображения при нажатии. Я использую.tabs для многостраничной формы и хотел бы вызвать событие, чтобы поменять класс изображения при нажатии на эту страницу. Вроде как Форма завершена. Типа панировочных сухарей. Мой код выглядит следующим образом. Любая помощь в правильном направлении будет очень цениться. -Спасибо

JS:

$(function () {
        $("#nav-ul li a").on("click", function (e) {
            e.preventDefault();
            $('img#no-1').removeClass("nav-number");
            $(this).children('img').addClass("nav-number-active")
        });
    });

HTML:

    <div id="nav-Container">
        <ul id="nav-ul">
            <li>
                <a href="#page-1" class="nav-a-link">General Information
                <img src="images/no-images/img-no-1.png" id="no-1" class="nav-number" />
                </a>
            </li>
            <li>
                <a href="#page-2" class="nav-a-link">Setpoints
                <img src="images/no-images/img-no-2.png" id="no-2" class="nav-number" />
                </a>
            </li>
            <li>
                <a href="#page-3">Call Flow Structure
                <img src="images/no-images/img-no-3.png" id="no-3" class="nav-number" />
                </a>
            </li>
            <li>
                <a href="#page-4">Summary
                <img src="images/no-images/img-no-4.png" id="no-4" class="nav-number" />
                </a>
            </li>
        </ul>
    </div>

StyleSheet:

.nav-number{
    margin:0px;
    float:right;
    padding:10px 0px 0px 13px;
    opacity:0.4;
    border:0px;
}
.nav-number-active{
    margin:0px;
    float:right;
    padding:10px 0px 0px 13px;
    border:0px;
}

Answer 1

Измени свой код на этот

$(function () {
    $("#nav-ul li a").on("click", function (e) {
        e.preventDefault();
        $(this).find("img").removeClass("nav-number").addClass("nav-number-active");
    });
});

в качестве альтернативы вы можете использовать toggleClass, чтобы сделать его чище, но если вы щелкните по нему еще раз, он вернется к исходному классу.

$(function () {
    $("#nav-ul li a").on("click", function (e) {
        e.preventDefault();
        $(this).find("img").toggleClass("nav-number nav-number-active");
    });
});

Answer 2

    var navs = $('#nav-ul a');
    navs.on('click', function () {    
       navs.removeClass('active');         
        $(this).addClass('active');
   });

Answer 3

При вызове addClass или removeClass не используйте ".". Назовите это по имени.

 $("#nav-ul li").delegate("a", "click", function () {
         $(this).children("a").addClass("nav-number")
             .siblings().removeClass("nav-number-active");
             return false;
     });

Кроме того, не уверен, почему вы используете $(this).children("a") внутри обработчика событий для a, не должно быть просто $(this).find('img').addClass(....?

Также лучше сначала удалить активный класс, а затем добавить его в тот, который вы хотите:

 $("#nav-ul li").delegate("a", "click", function (e) {
    e.preventDefault();
    $('a.nav-number-active').removeClass("nav-number-active");
    $(this).addClass("nav-number-active")
 });

Answer 4

Исправлены имена в скрипте. Настройка для удаления класса, а затем добавить. Также какая-то странная ошибка в системе мешала получению результатов. Я сделал простой перезагрузки компьютера, и это добилось цели. Не уверен, что причина, но подозреваемый кэш.