使用 onClick 使用 javascript 更改类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6443590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using onClick to change classes with javascript
提问by Luke Keller
I'm working on a menu which animates each li's padding and color properties on mouseover and mouseout, and I wanted to stop the animations and color changes by changing the link's class. So far, I've assigned the animations to stick with a.inactive, and wanted to change the class to a.active through an onclick event. So far, I've found some helpful resources on this site which I'll paste below.
我正在开发一个菜单，该菜单在鼠标悬停和鼠标悬停时为每个 li 的填充和颜色属性设置动画，我想通过更改链接的类来停止动画和颜色更改。到目前为止，我已将动画分配给 a.inactive，并希望通过 onclick 事件将类更改为 a.active。到目前为止，我在这个网站上找到了一些有用的资源，我将粘贴在下面。
$("#menu li a").click(function (){
if (!$(this).hasClass("inactive")) {
$("a.inactive").removeClass("inactive");
$(this).addClass("active");
}
});
The code above seems to be the ticket, but being a total noob to javascript, I'm having trouble creating a function out of it that can be executed via onClick. Here's the html:
上面的代码似乎是票证，但是对于 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>
Any help would be greatly appreciated. Thanks!
任何帮助将不胜感激。谢谢！
EDIT - Since the code you all have provided below should work but does not, I've gone ahead and put in the code for the mouseover/mouseout animations to see if for some strange reason there would be a conflict:
编辑 - 由于你们在下面提供的代码应该可以工作但不能，我已经继续输入鼠标悬停/鼠标移出动画的代码，看看是否出于某种奇怪的原因会发生冲突：
$('#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 });
});
采纳答案by drfranks3
The above code works for you? Assuming you have a jQuery library loaded in your file, after changing your second line to:
上面的代码对你有用吗？假设您的文件中加载了一个 jQuery 库，在将第二行更改为：
if ($(this).hasClass("inactive")) {
It seems to work fine! The function you have there will run whenever the specified <a>element is clicked. You don't even need the onclick element in the HTML.
它似乎工作正常！只要<a>单击指定的元素，您在那里的功能就会运行。您甚至不需要 HTML 中的 onclick 元素。
If however you do want to utilize the onclick element and turn your current code into a function that may be able to be used elsewhere, you could do something like:
但是，如果您确实想利用 onclick 元素并将当前代码转换为可以在其他地方使用的函数，则可以执行以下操作：
function change_class() {
if ($(this).hasClass("inactive")) {
$(this).removeClass("inactive").addClass("active");
}
});
And use onclick="change_class()"in your HTML.
并onclick="change_class()"在您的 HTML 中使用。
Here's a JSFiddle to test with: http://jsfiddle.net/TVms6/
这是一个用于测试的 JSFiddle：http: //jsfiddle.net/TVms6/
回答by Phil
Check out this http://api.jquery.com/toggleClass/
看看这个http://api.jquery.com/toggleClass/
$("#menu li a").click(function (){
$(this).toggleClass('inactive')
});
回答by nikhil
This is not the recommended way of doing stuff these days. While onclick() will work for you, it doesn't quite fit into the unobtrusive policy that people tend to follow with JavaScript these days. Read the description at Wikipedia.
这不是目前推荐的做事方式。虽然 onclick() 对你有用，但它不太适合人们最近使用 JavaScript 遵循的不显眼的策略。阅读Wikipedia 上的说明。
What you should be doing is something like
你应该做的是
$('selector').click(function(){
//the action that you want to perform
});
You can assign an id to your anchor tag to be able to easily target it.
您可以为锚标记分配一个 id，以便轻松定位它。
In my opinion its best to learn the correct way while you start learning itself, that way it becomes more of a habit from early on.
在我看来，最好在开始学习的同时学习正确的方法，这样从一开始就更像是一种习惯。
