Active link with CSS: active

Question

Active link with CSS: active

Navigation

#1 by (4 votes)

2

Folks, I 'm going to make a php code inside my class to display bold for example a specific menu that is active.

<div class="menu-up">
    <ul>
        <a href="index.php?url=menu"><li class="li-up fr <?php if ($_GET["url"]=="menu") { echo "active"; } ?>">MENU</li></a>
        <a href="index.php"><li class="li-up fr <?php if (!$_GET["url"]) { echo "active"; } ?>">HOME</li></a>
    </ul>
</div>

But now I know of an: active, same as: hover and such in the class, that when active it makes it different, but I could not make it work: active, follow the link talking about it: link

Follow my html with the html code and php doing the active gambiarra below: link

Could anyone help me make it work the same way I did the above code without using it?

php html css

asked by anonymous 06.08.2014 / 08:36

1 answer

How to change American format dates and / m / d to d / m / y in a dataframe in R? Involve part of a string

score 4 · Answer 1

The problem here is a conceptual mistake.

The pseudoclasse is used to identify one of the four states of a link, that is, if it matches the moment in that you click on the link. The other pseudoclasses are:: link,: visited and: hover.

What your code does is insert a class into the li tag, which is basically an identifier, such as an id , but can appear in multiple elements even HTML.

The main difference between the two things is that the pseudoclasses of the links are like state properties of the links, that is, every link will have this without you having to do anything, and they can be accessed by CSS for styling purposes.

Of the four, only: hover and: active may change while displaying a page, hence we group the link styles into two groups:

a:link, a:visited

a:hover, a:active

The other big difference between classes and pseudoclasses is how to use them in CSS. Classes (in fact) are symbolized with a period (.), While pseudoclasses are given two periods (:). For example:

a.exemplo:link, a.exemplo:visited { /* estilos */ }
a.exemplo:hover, a.exemplo:active { /* estilos */ }

Here the a tag is identified by the .example class, and by their : link > : : hover and active )

To experiment, I suggest the following example:

<!DOCTYPE html>
<html>
  <head>
  <style>
    a:link    {color:#009;}
    a:visited {color:#090;}
    a:hover   {color:#900;}
    a:active  {color:#9f0;}
  </style>
  </head>
  <body>

    <p>Passe o mouse e clique aqui: <a href="">link de testes</a></p>

  </body>
</html>

Finally, about your code, it should work, but only to dynamically define a class for the li tag, but it will only be used by the CSS style without any further implication.