Question

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

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

我正在搜索（谷歌搜索）这一段时间，没有任何运气。并且真的非常感谢任何有关此事的帮助。非常感谢！：）

Answer 1

您只需要将类从听音改为停止听音等。像这样：

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

Answer 2

我无法理解你的问题，如果你的意思是“如何在点击锚点时切换课程”这里是你的答案：

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

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

Answer 3

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'
       }
    })();
}

Answer 4

使用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");
        }
    })
})

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

4 个答案: