Question

想出如何用JS改变div / link /的任何onclick类。这是一个快速演示：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类属性不是特定于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元素的点击 - 即事件委派。

使用js更改div / link类onclick - 问题

3 个答案: