effect page current css and jquery? [closed]

0

I have a menu like this:

  

| HOME | NEWS | ABOUT | OTHERS |

This menu has background white , but I want to do the following, if I'm on the news page I want background to be blue , just like this wp theme ?

    
asked by anonymous 27.07.2017 / 00:25

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 that class, follows code:

CSS:

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

In%% of each page will be applied to the respective active menu item. On the home page, apply style to the HOME button on the news page, apply style to the NEWS button, and so on ... Not the best way, but as your menu is small and the project appears to have few pages, will not 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...
    
27.07.2017 / 01:39