Change CSS with Jquery

Question

How do I make the user click on a particular link, change the CSS and title? For example:

I have this link: Contraste

When you click on it, change the CSS and the link name too, passing to Sem contraste.

I started doing something, but Jquery is not my strong suit. Look below:

<a href="#" id="contraste" class="ativar" style="font-weight: bold" accesskey="c" title="Contraste ALT + c">Contraste (c)</a>

    $('#contraste').click(function(){

      var acao = $(this.className);

        if(acao === "ativar"){
           // Alterar o CSS
          }else{
            // Voltar para o CSS atual
        }

    });

Answer 1

You can check if the link contains the class with the method .is:

$('#contraste').click(function(){

   var acao = $(this).is(".ativar"); // retorna true ou false

   if(acao){ // se for true
      $(this)
      .css({ // muda o CSS
         "font-weight": "normal"
      })
      .text("Sem contraste") // altera o texto
      .removeClass("ativar"); // remove a classe
   }else{ // se for false
      $(this)
      .css({ // muda o CSS
         "font-weight": "bold"
      })
      .text("Contraste (c)") // altera o texto
      .addClass("ativar"); // adiciona a classe
   }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="contraste" class="ativar" style="font-weight: bold" accesskey="c" title="Contraste ALT + c">Contraste (c)</a>

Answer 2

A very simple solution is to use the function toggleClass, which puts the class in case it’s not there, or if it already is. For this reason you will switch between having the CSS of the class and not having, working exactly as you want. The link text switch has to be done separately, yet it is only one if.

Example:

$('#contraste').click(function(){
  $(".conteudo").toggleClass("contraste"); //coloca ou retira a classe contraste
  //troca o texto do link
  $(this).text($(this).text() == "Contraste (c)" ? "Sem Contraste (c)": "Contraste (c)");
});

.conteudo {
  background-color:lightGray;
  width:300px;
  height:100px;
}

.contraste {
  background-color:darkGray;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="contraste" accesskey="c" title="Contraste ALT + c">Contraste (c)</a>
<div class="conteudo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat, lorem vitae consectetur tincidunt, nisl erat porta ligula, et scelerisque elit lorem nec augue.
</div>