current page effect css and jquery?

Asked

Viewed 220 times

0

I have a menu like this:

| HOME | NEWS | ABOUT | OTHERS |

that menu has background white, but I want to do the following, if I’m on the news page I want the background stay blue, like that wp theme?

javascript jquery html css

  • If you could post your html code + css + javascript from your page, your attempts ?

  • i have already tried to put an onload on each page by calling a function with the menu id <script> Function color(menuid){ var change = Document.getElementById(meuid); change.style="background:blue;" } </script> <body onload="color=('Iddomenu')">

  • Is this a site created only with HTML? Wordpress? Other?

  • Possible duplicate of How to change the color of the link when you are on the link page accessed or possible duplicate of: How to Style Current Page Navigation Link

1 answer

2


You can create a class that would change the style of the active option in the menu, and then with javascript add this class, follow code:

CSS:

/*Aqui pode ser inserido mais estilos, coloquei só o background para o exemplo*/
.ativo{
    background: blue;
}

In the .onload of each page will be made the application of this class in the respective item active menu. On the home page, apply style to the button HOME, on the news page, apply style on the button NEWS, and so on and so forth... It’s not the best way, but since your menu is small and the project appears to be few pages, it won’t bring you so much rework.

JS:

//Exemplo página HOME
window.onload = function(){
    document.querySelector("#home").addClass("ativo");
}

//Exemplo página NOTICIAS
window.onload = function(){
    document.querySelector("#noticias").addClass("ativo");
}
//E assim sucessivamente em cada pagina...

Browser other questions tagged javascript jquery html css

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