How to change the behavior of an HTML tag

Asked

Viewed 43 times

1

wish to change tag behavior strike and I need your help.

In the change I want the tag to assume a behavior according to the view, where in All commitments, url (#), the text will appear gray and strikethrough, already in (#view) Active commitments, the tag strike 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>

.

css3

  • Only with CSS or can with jQuery?

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) at all times:

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

Correct for 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: https://jsfiddle.net/4ay6t38k/

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.