Как изменить класс якорного класса при щелчке мышью?

Question

Это мой сайт.http://www.sarahjanetrading.com/js/j/index.html Весь код + изображения + CSS есть с доступом к любому

Я хочу, чтобы кнопка класса привязки «listen» менялась (переключалась) на кнопку класса «stop listen» якоря, когда я(или кто-то еще) нажимает на него (onclick).Все 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

делайте это, используя jQuery, который облегчает жизнь и решает проблемы с несколькими браузерами. Включите библиотеку jquery на свою HTML-страницу и предоставьте следующую функцию, которая позаботится о вашем требовании.

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

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

Я не очень хорошо понимаю ваш вопрос, если вы имеете в виду «как переключать класс при нажатии на якорь», вот ваш ответ:

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

Кстати, хорошая работа в CSS,но все равно нужно много работать над скриптами;)