更改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元素的点击 - 即事件委派。