Usar o CSS para destacar um texto quando um link é clicado

Escrito por kevin lee | Traduzido por thiago isaias
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Usar o CSS para destacar um texto quando um link é clicado
Surpreenda os visitantes do site com links que realizam outras tarefas (Ciaran Griffin/Lifesize/Getty Images)

Quando você clica em um link em um site, ele normalmente dirige o navegador para outra página. É possível substituir esse comportamento padrão e usar links para executar outras tarefas interessantes. Por exemplo, pode-se ter um destaque no texto da página web de sua aplicação quando o usuário clica em um link. O CSS permite a definição da cor de realce e o JavaScript aplica essa cor ao texto.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o editor HTML e qualquer documento de página web.

  2. 2

    Cole este código na seção "<body>" do documento:

    <h1 id="heading1">This is Heading 1</h1> <h1 id="heading2">This is Heading 2</h1>

    <a href="javascript:highlightText('heading1')">Click to Highlight Heading 1</a> <a href="javascript:highlightText('heading2')">Click to Highlight Heading 2</a>

    Este código cria dois cabeçalhos e dois links. O primeiro link chama a função do JavaScript chamada "highlightText". Ela passa o valor "ID" do primeiro cabeçalho, "heading1" para a função. O segundo link chama a mesma função. Este link passa o ID do segundo cabeçalho para a função.

  3. 3

    Copie o seguinte código e adicione-o a seção "<head>" do documento:

    <style type="text/css"> .highlight {background-Color:yellow;} </style>

    <script type="text/javascript" language="javascript">

    function highlightText(id) { var textObject = document.getElementById(id); textObject.className = "highlight"; }

    </script>

    A classe CSS "highlight", dentro da seção de estilo, define a cor de fundo para amarelo. A função "highlightText", chamada pelos links descritos anteriormente, a muda a propriedade "className" do link. Desde que "className" seja "highlight", a cor de fundo muda para amarelo.

  4. 4

    Salve o documento HTML e abra-o no navegador. Clique no primeiro link. O código JavaScript executará e aplicará o destaque do CSS ao texto no primeiro cabeçalho. Clique no segundo link. O código destacará aquele cabeçalho também.

Dicas & Advertências

  • Não é preciso usar amarelo como cor de destaque. Mude "yellow" (amarelo) para outra cor na seção de estilo do documento. Também é possível fazer com que os links destaquem outros elementos, como um parágrafo. Crie um link e passe o valor do ID para a função do JavaScript.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível