How to Style Current Page Navigation Link

Asked

Viewed 957 times

0

inserir a descrição da imagem aqui
The image above is a print of menu I’m developing that has the style I put right in CSS. But only when I pass the mouse above the link, that is when I do :hover which is what I was doing in this print.

Now I want to configure for example:
Click on the página 1, Then you’ll take me to página 1 and the background of that same link will be highlighted/highlighted in green as in the image example above, but not on the page Geral, only on the current page as I am not on the page Geral, and vice versa. How do I?

javascript jquery html css menu

1 answer

3

If you’re creating page by page, you can use that advantage to do so.
For example, let’s imagine that we have 2 pages: index.html and sobre.html, and we want to highlight the link of the current page as we navigate from one to the other.

Well, first let’s create a CSS style responsible class for this featured link:

.paginaAtual {
    color:#fff;
    background-color:#71953E;
}

So now we’re going to do the following - On the page index.html navigation links will be created as follows:

<div id="menu">
    <ul>
        <li class="linkMenu paginaAtual"><a href="index.html">Index page</a></li>
        <li class="linkMenu"><a href="sobre.html">Sobre</a></li>
    </ul>
</div>

While on the page about.html links will be created like this:

<div id="menu">
    <ul>
        <li class="linkMenu"><a href="index.html">Index page</a></li>
        <li class="linkMenu paginaAtual"><a href="sobre.html">Sobre</a></li>
    </ul>
</div>

If the above example is not an option, here is an alternative to this:

In this second option, we will use Javascript, more precisely the jQuery library. To use the jQuery library if you’re not familiar with it, we need to implement it in <head> of our document/website using the following line of code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

This line of code above will implement the jQuery library hosted by Google, but it could also be hosted by you on your server. Then we will create our menu:

<div id="menu">
    <ul>
        <li class="linkMenu"><a href="index.html">Index page</a></li>
        <li class="linkMenu"><a href="sobre.html">Sobre</a></li>
    </ul>
</div>

$("a[href*='" + location.pathname + "']").addClass("paginaAtual");

This line of Javascript code above needs to be implemented within the tag <script></script> in your document.

Browser other questions tagged javascript jquery html css menu

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