更改div /鏈接類與js的onclick - 問題

Question

找出如何更改一個div /鏈接/任何onclick與JS的類。下面是一個快速演示：http://nerdi.net/classchangetest.html

現在我想弄清楚的是，如何在點擊新鏈接時恢復之前點擊的舊鏈接（或「停用」）鏈接。

任何想法？謝謝！

Answer 1

function changeCssClass(navlink) 
{ 
    var links=document.getElementsByTagName('a'); 
    for(var i=0, n=links.length; i<n; i++) 
    { 
     links[i].className='redText'; 
    } 
    document.getElementById(navlink).className = 'blueText'; 
} 

有了這段代碼，所有的鏈接都會變成紅色，而且點擊會變成藍色。

我希望它會有幫助。

Answer 2

function changeCssClass(ele, add_class) { 
    // if add_class is not passed, revert 
    // to old className (if present) 
    if (typeof add_class == 'undefined') { 
     ele.className = typeof ele._prevClassName != 'undefined' ? ele._prevClassName : ''; 
    } else { 
     ele._prevClassName = ele.className || ''; 
     ele.className = add_class; 
    } 
} 

嘗試在這裏：http://jsfiddle.net/Zn7BL/

使用它：

// add "withClass" 
changeCssClass(document.getElementById('test'), 'withClass'); 

// revert to original 
changeCssClass(document.getElementById('test')); 

Answer 3

這是一個更好的在這裏發表您的代碼，它可以更容易爲那些讀書的問題，併爲他人搜索後來。鏈接的例子是不可靠的，可能不會持續很長時間。

<style type="text/css"> 
.redText, .blueText { font-family: Arial; } 
.redText { color : red; } 
.blueText { color : blue; } 
</style> 

<script language="javascript" type="text/javascript"> 

語言屬性已被廢棄了很長一段時間，它不應該被使用：從鏈接（和格式進行發佈）

複製。 type屬性是必需的，所以保持這一點。

function changeCssClass(navlink) 

HTML class屬性不是用於CSS的特定屬性，它用於對元素進行分組。更好的名字可能是changeClassName。

{ 
     if(document.getElementById(navlink).className=='redText') 
     { 
      document.getElementById(navlink).className = 'blueText'; 
     } 
     else 
     { 
      document.getElementById(navlink).className = 'redText'; 
     } 
    } 

</script> 

<a href="#" onclick="changeCssClass('navlink')" id="navlink" class="redText">Link 1</a><br><br> 

調用時，與行內監聽相關的功能都會有這關鍵字設置爲元素，這樣你就可以調用該函數爲：

<a ... onclick="changeCssClass(this);" ...> 

那麼你不必通過該ID並且您不需要getElementById該函數中。

您可能會考慮一個「切換」類的函數：如果它不存在，則添加它;如果沒有，則添加它。你需要編寫一些小功能，如hasClass，addClass和removeClass，那麼你的聽衆可以是：

function toggleClass(el, className) { 
    if (hasClass(el, className) { 
    removeClass(el, className); 
    } else { 
    addClass(el, className); 
    } 
} 

然後給您使用的鏈接樣式規則默認樣式（即應用redText風格的所有鏈接），然後只需添加和刪除blueText類。

您也可以考慮在鏈接的父級上放置單個函數以處理來自A元素的點擊 - 即事件委派。