Использование onClick для изменения классов с помощью JavaScript

Question

Я работаю над меню, которое анимирует свойства заполнения и цвета каждого li при наведении и наведении мыши, и я хотел остановить анимацию и изменение цвета, изменив класс ссылки.До сих пор я назначил анимацию для привязки к a.inactive и хотел изменить класс на a.active посредством события onclick.До сих пор я нашел некоторые полезные ресурсы на этом сайте, которые я вставлю ниже.

$("#menu li a").click(function (){
if (!$(this).hasClass("inactive")) {
$("a.inactive").removeClass("inactive");
$(this).addClass("active");
}
});

Код выше, кажется, билет, но, будучи полным новичком в javascript, я имеюпроблемы с созданием из него функции, которая может быть выполнена с помощью onClick.Вот HTML:

<ul id="menu">
                <li class="landscape-architecture"><a class="inactive" href="#project1" onclick="changeClass();"><span class="menu_year">2006/</span>AQUEOUS PLAN</a></li>

Любая помощь будет принята с благодарностью.Спасибо!

РЕДАКТИРОВАТЬ - Поскольку код, который вы все предоставили ниже, должен работать, но не работает, я пошел вперед и вставил код для анимации при наведении курсора / мышки, чтобы посмотреть, будет ли по какой-то странной причинеконфликт:

    $('#menu li').click(function () {   
    window.location = $(this).find('a').attr('href')

}).mouseover(function (){

    $(this).find('a.inactive')
    .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
    .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

}).mouseout(function () {

    $(this).find('a.inactive')
    .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
    .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });

}); 

Answer 1

Проверьте это http://api.jquery.com/toggleClass/

$("#menu li a").click(function (){
   $(this).toggleClass('inactive')
});

Answer 2

Это не рекомендуемый способ делать вещи в наши дни.Хотя onclick () будет работать для вас, она не совсем вписывается в ненавязчивую политику, которой люди обычно следуют с помощью JavaScript в наши дни.Прочитайте описание на Википедии .

Что вы должны делать, это что-то вроде

$('selector').click(function(){
//the action that you want to perform
});

Вы можете назначить идентификатор для своего тега привязки, чтобы иметь возможность легко ориентироватьсяэто.

По моему мнению, лучше всего выучить правильный путь, пока вы начинаете учиться сам, так как с самого начала это становится привычкой.

Answer 3

вышеуказанный код работает у вас?Предполагая, что в ваш файл загружена библиотека jQuery, после изменения второй строки на:

if ($(this).hasClass("inactive")) {

Кажется, она работает нормально!Функция, которая у вас есть, будет запускаться при каждом нажатии на указанный элемент <a>.Вам даже не нужен элемент onclick в HTML.

Если вы все же хотите использовать элемент onclick и превратить ваш текущий код в функцию, которую можно использовать в другом месте, вы можете сделать что-тонапример:

function change_class() {
    if ($(this).hasClass("inactive")) {
        $(this).removeClass("inactive").addClass("active");
    }
});

И использовать onclick="change_class()" в своем HTML.

Вот JSFiddle для тестирования: http://jsfiddle.net/TVms6/