用鼠标单击时如何更改锚类的类？答案

【问题标题】：How to change the class of an anchor class when clicked with the mouse?用鼠标单击时如何更改锚类的类？
【发布时间】：2011-09-28 15:47:07
【问题描述】：

这是我的网站。 http://www.sarahjanetrading.com/js/j/index.html 所有代码+图像+css都可以访问任何人

当我（或其他人）单击它（onclick）时，我希望“收听”锚类按钮更改（切换）为“停止收听”锚类按钮。所有的 CSS 和 HTML 都完成了，我只想要一个可以在鼠标点击锚类时切换锚类的脚本。

我正在搜索（谷歌搜索）一段时间，但没有任何运气。并且非常感谢您对此事的任何帮助。多谢！ :)

【问题讨论】：

开始使用 jquery :-) addClass 和 removeClass 会很容易
好的，所以我将 jquery 嵌入到文档的头部。仍然没有运气:(
我没有在您的视图源中看到 jquery！
现在是。它有效！ :) 非常感谢大家！你们真棒！！ :)

标签： javascript html css input

【解决方案1】：

您只需将课程从听更改为停止听等。像这样的：

$(".listen, .stop").click(function() {
  if ($(this).hasClass("listen")) {
      $(this).removeClass("listen").addClass("stop");
  } else {
      $(this).removeClass("stop").addClass("listen");
  }
});

【讨论】：

这只是一个简单的例子，我看到 Bala 已经花时间让它为您提供完整的功能。

【解决方案2】：

使用 jQuery 来做这件事，这让生活更轻松，并解决了跨浏览器问题。在您的 HTML 页面中包含 jquery 库，并提供以下函数来满足您的要求。

$(function(){
    $("a.button").click(function(){
        which = $(this);
        if($(which).hasClass("listen")){
            $(which)
                    .text("custom text") // edited for changing text
            .removeClass("listen")
            .addClass("stop-listening");
        }
        else if($(which).hasClass("stop-listening")){
            $(which)
                    .text("custom text") // edited for changing text
            .removeClass("stop-listening")
            .addClass("listen");
        }
    })
})

【讨论】：

【解决方案3】：

我不能很好地理解您的问题，如果您的意思是“如何在单击锚点时切换类”，这就是您的答案：

function changeClass(elem, cls1,cls2)
{
    elem.className = (elem.className == cls1)?cls2:cls1;
}

顺便说一句，CSS 做得很好，但仍然需要在脚本上做很多工作；）

【讨论】：

【解决方案4】：

var aButtons = document.getElementsByTagName('a'),   // Retrieve all the buttons
    max, 
    i;

for (i = 0, max = aButtons.length; i < max; i += 1) {
    (function() {
       var bttn = aButtons[i];
       // Handle the user click
   .   bttn.onclick = function() {

       // If this is  listen button, change it in a 'stop-listening button'
       if (bttn.className.indexOf('listen') !== -1) {
          bttn.className = 'stop-listening button';          
       } else {
         bttn.className = 'listen button';  // else change it in a 'listen button'
       }
    })();
}

【讨论】：