Changing the behavior of an HTML tag

Navigation
1

I want to change the behavior of the strike tag and need the help of the masters.

In the change I want the tag to behave according to the view, where in All Appointments , url (#), the text will appear gray and crossed out already in (#view) strong> Active appointments , the strike tag should be hidden. 

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

.

    
asked by anonymous 24.04.2018 / 20:37

1 answer

2

Just correct the use of :target , this is wrong: 

# strike{
color:#888;
}

And this is forcing strike to be invisible ( display: none ) always: 

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

Please correct this: 

#view strike {
    color:#888;
}

#view:target strike
{
    display: none;
}

Example: 

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

Example in jsfiddle: link

    
24.04.2018 / 21:01
Is there a way to change the field type of a query in delphi without having to delete and include it? Problems with encoding in Database Query