使用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的類

回答

相關問題