How to change the color of the link when you are on the link page accessed

Asked

Viewed 2,182 times

0

I see many sites that, when the person opens the "ABOUT" page, a CSS is activated that stylizes only that link. I believe it is with JS, and it involves comparison with URL, but in practice I have no idea.

Suddenly it seems to be a duplicate OF THAT LINK, but in the case was done with PHP, and I do not believe that is the most practical form..

javascript jquery

  • Whenever someone clicks on a link it should generate a new request (a new page), so if you don’t dynamically do php you can insert a css class directly into the static page of your site. Ex: <li class="active" ><a href="#">home</a></li>

  • Take a look at these links ai: http://www.maujor.com/tutorial/csslinks.php http://www.w3schools.com/cssref/sel_active.asp

  • Thiago, if any answer helped mark as solution

2 answers

1

Look you can do as follows: (In case the person is on Link 1 Start)

Html

        <nav id="navigation">
                <ul>
                <li class="active"><a href="link1.html">Ínicio</a></li>
                <li><a href="link2.html">Sobre</a></li>
                <li><a href="link3.html">Serviços</a></li>
            </ul>
            <div class="cl">&nbsp;</div>
        </nav>

Css

           #navigation { padding:0 21px;  margin-bottom: 15px; }
           #navigation ul { list-style:none; list-style-position: outside; }
           #navigation ul li { padding: 0 10px; float: left; font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 500; }
           #navigation ul li:first-child { padding-left: 0; }
           #navigation ul li a { color: #4a4a4a; padding: 0 7px; display:block; height: 21px; line-height: 21px; border: 2px solid transparent; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; }
           #navigation ul li.active a,
           #navigation ul li a:hover { border: 3px solid #ffb800;  background: url(images/nav-btn.png) repeat-x 0 0; color:#fff; text-decoration: none; }
           #navigation a.nav-btn { display:none; }

If you want to see the result click here

  • It turns out that my site uses a dynamic header included with PHP, IE, the links are always the same.. There is no way I can give a class directly on the link.. I imagined that with JS it would be easier, but I believe it is better to use php..

  • you can use html in php freely, just make the appropriate changes

1


If you’re building a website with static pages, in HTML for example, the best way to do that is to add a class - linkAtivo for example, in the navigation link corresponding to each designated page that is supposed to be the current page. In other words:

Let’s say we have a page sobre.html. To highlight the navigation link to know that we are on the page sobre, open the file sobre.html and in the navigation of this page we will add the class linkAtivo to the link about.

Page - sobre.html

<ul class="navegacao">
    <li><a class="nav" href="/inicio.html">Início</a></li>
    <li><a class="nav" href="/contacto.html">Contacto</a></li>
    <li><a class="nav linkAtivo" href="/sobre.html">Sobre</a></li> <!-- Classe Adicionada -->
</ul>

And in CSS it will be the same for all pages:

.navegacao a.linkAtivo {
    color: red;
}

Then just do the same on all pages. For example

Page contacto.html:

<ul class="navegacao">
    <li><a class="nav" href="/inicio.html">Início</a></li>
    <li><a class="nav linkAtivo" href="/contacto.html">Contacto</a></li> <!-- Classe Adicionada -->
    <li><a class="nav" href="/sobre.html">Sobre</a></li>
</ul>

And so on and so forth...

If you really want to use Javascript, you can get the same result as follows:

<script type="text/javascript">
for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].href == document.URL) {
        document.links[i].className = 'linkAtivo';
    }
}
</script>

  • I misexpressed myself. As I said in the comment above, I include a header file with the menu, so the links do not change.. how would that look?

  • try the last Javascript method I added at the end of my reply @Thiagobarros . This is a Wordpress site?

  • No, I’m doing everything by hand. I just want to make the link activate a class according to its URL (am I on the page about? then the 'about' menu item will turn red). Do the CSS I know, the difficulty is to know the logic for such, and also if I do in JS or PHP. I could do several 'elseif' in PHP to query the URL, but I would like ideas and some previews..

Browser other questions tagged javascript jquery

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