2

Como faço para que o usuário ao clicar em um determinado link, altere o CSS e o título? Por exemplo:

Tenho esse link: Contraste

Ao clicar nele, mudasse o CSS e o nome do link também, passando para Sem contraste.

Comecei fazendo algo, mas JQuery não é meu forte. Vejam abaixo:

<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
        }

    });
2
  • Você está usando alguma programação backend no seu código? Ficaria mais fácil se tivesse usando o PHP para compor o seu frontend.. Assim você poderia criar uma variável dentro da sua tag header.. Aí sim a condição poderia funcionar.. tipo, If ação ativar, altera o endereço de busca na herder, Else, continua o mesmo Commented 5/05/2018 às 13:13
  • Olá Francis. Na verdade ele não terá backend, é apenas um site institucional que terá acessibilidade. Algumas coisas já consegui fazer, como aumentar a fonte, ir pra o conteúdo, usar o teclado, mas o contraste não estou conseguindo. Não teria como fazer com JQuery ou Javascript? Vi alguns exemplos usando 02 links, mas gostaria de usar apenas 1.
    – user24136
    Commented 5/05/2018 às 13:18

2 Respostas 2

2

Pode verificar se o link contém a classe com o método .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>

1
  • Muito obrigado a todos. As duas soluções funcionaram.
    – user24136
    Commented 5/05/2018 às 14:26
1

Uma solução bem simples é utilizar a função toggleClass, que coloca a classe caso não lá esteja, ou tira caso já tenha. Por esse motivo vai alternar entre ter o CSS da classe e não ter, funcionando exatamente como pretende. O alternar do texto do link já tem de ser feito separadamente, ainda assim não passa de um if.

Exemplo:

$('#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>

Você deve fazer log-in para responder a esta pergunta.