1

desejo alterar o comportamento da tag strike e preciso do auxilio dos senhores.

Na alteração quero que a tag assuma um comportamento de acordo com a view, onde em Todos os compromissos, url (#), o texto aparecerá cinza e tachado, já em (#view) Compromissos ativos, a tag strike deverá ficar oculta.

<!DOCTYPE html>
<html lang="pt_br">
   <head>
      <meta charset="utf-8"/>
      <title>strike</title>
      <style>
         *{
         font-family: verdana;
         }
         a:link, a:visited, a:hover{
         color: #000080;
         }
         nav ul {
         list-style-type: none;
         margin: 0 0 2em 0;
         }
         # strike{
         color:#888;
         }
         #view strike
         {
         color:#888;
         display: none;
         }
         #view .hide-action
         {
         display: block;
         }
         #view .show-action,
         #view .textoimpressao
         {
         display: none;
         }
         #view:target .hide-action
         {
         display: none;
         }
         #view:target .show-action
         {
         display: block;
         }
      </style>
   </head>
   <body id="view">
      <h1>Exemple</h1>
      <nav>
         <ul>
            <li> <a class="show-action" href="#"> Todos compromissos </a>
            </li>
            <li><a class="hide-action" href="#view"> Compromissos ativos </a>
            </li>
         </ul>
      </nav>
      <p>I - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor placerat ornare. Maecenas eu mi vel risus vehicula faucibus sed vel ligula. Proin lacinia consectetur mi a cursus. Nam vitae mauris enim. In consectetur erat ex, egestas congue urna facilisis in. Sed imperdiet vehicula vestibulum. Fusce sit amet accumsan ante. Cras vel convallis velit.
      </p>
      <p>II - <strike>Nulla vehicula velit sed velit ultrices cursus. In commodo sed metus eu interdum. Fusce congue luctus justo vitae tristique. Aliquam massa tortor, efficitur vitae lectus et, dictum scelerisque magna. Nulla pulvinar quam massa, et rutrum nunc hendrerit dapibus. Praesent vehicula, justo ut suscipit sodales, purus nunc pulvinar magna, sit amet aliquam sem tellus a felis. Curabitur eget pretium ipsum. Suspendisse potenti. Nullam consectetur ut lectus eget scelerisque. Donec at turpis vel ex malesuada condimentum vulputate sit amet enim. Sed tortor nibh, hendrerit egestas enim in, aliquam maximus justo. Ut non ex consequat, tempus dui sit amet, sagittis orci. Donec semper sit amet nunc in rhoncus. Nam et cursus magna.</strike> (Concluído dia 19/04/2018)
      </p>
      <p>III - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor placerat ornare. Maecenas eu mi vel risus vehicula faucibus sed vel ligula. Proin lacinia consectetur mi a cursus. Nam vitae mauris enim. In consectetur erat ex, egestas congue urna facilisis in. Sed imperdiet vehicula vestibulum. Fusce sit amet accumsan ante. Cras vel convallis velit.
      </p>
      <p>IV - <strike>Aenean ut metus libero. Sed ac congue justo, sed rhoncus nulla. Morbi erat mauris, eleifend a risus sit amet, scelerisque molestie nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vel sagittis enim. Curabitur bibendum eros sit amet sollicitudin blandit. Morbi id porttitor mauris. Cras id malesuada nisl. Nam convallis pretium porta. Mauris turpis elit, tristique ac consequat placerat, ullamcorper sit amet nulla. Duis nec sem eu sem dapibus iaculis a at nibh. Phasellus a dignissim tortor, vitae euismod sem. </strike>(Concluído dia 20/04/2018)
      </p>
   </body>
</html>

.

1
  • Só com CSS ou pode com jQuery?
    – hugocsl
    Commented 24/04/2018 às 18:49

1 Resposta 1

2

Basta corrigir o uso do :target, isto está errado:

# strike{
color:#888;
}

E isto está forçando strike ser invisivel (display: none) sempre:

#view strike
{
color:#888;
display: none;
}

Corrija para isto:

#view strike {
    color:#888;
}

#view:target strike
{
    display: none;
}

Exemplo:

<!DOCTYPE html>
<html lang="pt_br">
   <head>
      <meta charset="utf-8"/>
      <title>strike</title>
      <style>
         *{
         font-family: verdana;
         }
         a:link, a:visited, a:hover{
         color: #000080;
         }
         nav ul {
         list-style-type: none;
         margin: 0 0 2em 0;
         }
         #view strike {
         color:#888;
         }
         #view:target strike
         {
         display: none;
         }
         #view .hide-action
         {
         display: block;
         }
         #view .show-action,
         #view .textoimpressao
         {
         display: none;
         }
         #view:target .hide-action
         {
         display: none;
         }
         #view:target .show-action
         {
         display: block;
         }
      </style>
   </head>
   <body id="view">
      <h1>Exemple</h1>
      <nav>
         <ul>
            <li> <a class="show-action" href="#"> Todos compromissos </a>
            </li>
            <li><a class="hide-action" href="#view"> Compromissos ativos </a>
            </li>
         </ul>
      </nav>
      <p>I - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor placerat ornare. Maecenas eu mi vel risus vehicula faucibus sed vel ligula. Proin lacinia consectetur mi a cursus. Nam vitae mauris enim. In consectetur erat ex, egestas congue urna facilisis in. Sed imperdiet vehicula vestibulum. Fusce sit amet accumsan ante. Cras vel convallis velit.
      </p>
      <p>II - <strike>Nulla vehicula velit sed velit ultrices cursus. In commodo sed metus eu interdum. Fusce congue luctus justo vitae tristique. Aliquam massa tortor, efficitur vitae lectus et, dictum scelerisque magna. Nulla pulvinar quam massa, et rutrum nunc hendrerit dapibus. Praesent vehicula, justo ut suscipit sodales, purus nunc pulvinar magna, sit amet aliquam sem tellus a felis. Curabitur eget pretium ipsum. Suspendisse potenti. Nullam consectetur ut lectus eget scelerisque. Donec at turpis vel ex malesuada condimentum vulputate sit amet enim. Sed tortor nibh, hendrerit egestas enim in, aliquam maximus justo. Ut non ex consequat, tempus dui sit amet, sagittis orci. Donec semper sit amet nunc in rhoncus. Nam et cursus magna.</strike> (Concluído dia 19/04/2018)
      </p>
      <p>III - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor placerat ornare. Maecenas eu mi vel risus vehicula faucibus sed vel ligula. Proin lacinia consectetur mi a cursus. Nam vitae mauris enim. In consectetur erat ex, egestas congue urna facilisis in. Sed imperdiet vehicula vestibulum. Fusce sit amet accumsan ante. Cras vel convallis velit.
      </p>
      <p>IV - <strike>Aenean ut metus libero. Sed ac congue justo, sed rhoncus nulla. Morbi erat mauris, eleifend a risus sit amet, scelerisque molestie nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vel sagittis enim. Curabitur bibendum eros sit amet sollicitudin blandit. Morbi id porttitor mauris. Cras id malesuada nisl. Nam convallis pretium porta. Mauris turpis elit, tristique ac consequat placerat, ullamcorper sit amet nulla. Duis nec sem eu sem dapibus iaculis a at nibh. Phasellus a dignissim tortor, vitae euismod sem. </strike>(Concluído dia 20/04/2018)
      </p>
   </body>
</html>

Exemplo no jsfiddle: https://jsfiddle.net/4ay6t38k/

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .