javascript - 使用 onClick 通过 javascript 更改类

Question

我正在开发一个菜单，该菜单在鼠标悬停和鼠标移开时为每个 li 的填充和颜色属性设置动画，并且我想通过更改链接的类来停止动画和颜色更改。到目前为止，我已经将动画指定为a.inactive，并希望通过onclick 事件将类更改为a.active。到目前为止，我已经在此网站上找到了一些有用的资源，我将在下面粘贴这些资源。

$("#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

上面的代码适合您吗？假设您的文件中加载了 jQuery 库，将第二行更改为:

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

看起来效果不错!您在那里的函数将在指定的 <a> 时运行。单击元素。您甚至不需要 HTML 中的 onclick 元素。

但是，如果您确实想利用 onclick 元素并将当前代码转换为可以在其他地方使用的函数，您可以执行以下操作:

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

并使用onclick="change_class()"在您的 HTML 中。

这是一个用于测试的 JSFiddle:http://jsfiddle.net/TVms6/