Mihail Efreet Vigovskiy Mihail Efreet Vigovskiy - 2 years ago 109
HTML Question

Nav highlight current page

Please help solve the problem, because my ideas have been exhausted...(

I have a :

<nav class="nav_editor" ng-show="status.editorMenuOn">
<ul class="menu_editor">
<li class=""><a ng-href="/articles/user/{{ status.userID }}">My Articles</a></li>
<li class=""><a href="/articles">Create Article</a></li>
<li class=""><a href="#">Comments</a></li>

And a CSS classes:

.menu_editor li a {
color: rgb(125,125,125);
font-size: 1.25vw;
margin-right: 20px;
text-decoration: none;


I want to make highlighting the item in the menu when this page is active (not pseudo ":active"), just when someone watching current page, for example "My Articles".

I have tried about 3 variants by CSS/HTML only, JavaScript and jQuery, but it is either not working properly or not working at all.

Please help solve this problem.

Thank you in advance!

Answer Source

When the myArticle page loads, just do jquery addClass method.

     //remove highlighted menu buttons on pageload
     $(".menu_editor li").removeClass("activeMenuItem");

     //add class only to the specific one
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download