Сменить классы изображений при щелчке тега. 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

При вызове 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 2

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

Answer 3

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

Answer 4

изменить код этой

$(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"); 
    }); 
});