使用 onClick 通过 javascript 更改类答案

【问题标题】：Using onClick to change classes with javascript使用 onClick 通过 javascript 更改类
【发布时间】：2011-06-22 16:53:51
【问题描述】：

我正在制作一个菜单，该菜单在鼠标悬停和鼠标悬停时为每个 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 });

});

【问题讨论】：

标签： javascript jquery html class onclick

【解决方案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/

【讨论】：

我去了你的 JSFiddle 测试，发现它在那里工作，但是当我将它应用到我的网站时，它没有 =[。我已经在这里托管了一个测试版本：luke-keller.com/test/projects.html
我将您的测试文件保存在那里并进行了更多编辑。我相信如果你把你的代码放在下面，它应该可以工作： $(document).ready(function(){ /* Script Here */ });
做到了 D Franks!!!!!!!!!!!!!!!!!!你是我的英雄。而且我相信其他建议也适用于我的网站。谢谢大家！

【解决方案2】：

看看这个http://api.jquery.com/toggleClass/

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

【讨论】：

与我对 Dave 的回复的评论类似，我似乎无法让它发挥作用。我已经发布了一个链接，指向我目前所拥有的粗略版本 - luke-keller.com/test/projects.html

【解决方案3】：

这不是现在推荐的做事方式。虽然 onclick() 对你有用，但它并不完全符合人们现在使用 JavaScript 所遵循的不显眼的策略。阅读Wikipedia的描述。

你应该做的是类似的事情

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

您可以为您的锚标记分配一个 id，以便能够轻松定位它。

在我看来，最好在开始学习的同时学习正确的方法，这样从一开始就成为一种习惯。

【讨论】：