使用onClick更改javascript的类

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

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

任何帮助将不胜感激。谢谢！因为你下面提供的代码应该可以工作，但是没有，我已经提前把代码放在mouseover/mouseout动画中，看看是否有一些奇怪的原因会有冲突：

$('#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 }); 

});

来源

2011-06-22 Luke Keller

上面的代码适合你吗？假设你有一个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/

来源

2011-06-22 17:09:32 drfranks3

我去了你的JSFiddle测试，看到它在那里工作，但是当我将它应用到我的网站时，它并没有= [。我已经托管了我到目前为止在这里的测试版本：http://luke-keller.com/test/projects.html –

我在那里保存了测试文件，并做了一些更多的编辑。我相信如果你把你的代码放在下面，它应该可以工作：$（document）.ready（function（）{/ * Script Here * /}）; – drfranks3

这是做D法兰克斯!!!!!!!!!!!!!!!!!!你是我的英雄。我相信其他建议也可以在我的网站上运行。谢谢大家！ –

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

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

来源

2011-06-22 17:14:18 Phil

与我对Dave的回复所做的评论类似，我似乎无法得到此工作。我已经发布了一个到目前为止的粗略版本的链接 - http://luke-keller.com/test/projects.html –

这不是做的东西，这些天的推荐方式。虽然onclick（）将适用于您，但它并不完全适合人们倾向于使用JavaScript这一天遵循的不引人注目的政策。请阅读Wikipedia的说明。

什么，你应该做的是一样的东西

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

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

在我看来，最好是在开始学习的时候学习正确的方法，这样从早期就变成了一种习惯。

来源

2011-06-22 17:17:46 nikhil

很高兴知道。谢谢！ –

使用onClick更改javascript的类

回答

相关问题