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

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

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

Answer 2

查看此http://api.jquery.com/toggleClass/

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

Answer 3

这不是推荐的做事方式。虽然onclick（）对你有用，但它并不完全符合人们现在倾向于使用JavaScript的不显眼的策略。请阅读Wikipedia上的说明。

你应该做的是像

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

您可以为锚标记指定一个ID，以便能够轻松定位它。

在我看来，最好在你开始学习的过程中学习正确的方法，从那时起它就变成了一种习惯。

使用onClick通过javascript更改类

3 个答案: