How to add an active class on a current menu item page? html

Question

How to add an active class on a current menu item page in html header.php . I added a custom menu in wordpress that is :

  <ul class="menuul">
            <li><a href="/#/" class="current">Начало</a></li>
            <li><a href="/#/muskulnamasa/">Действие</a></li>
            <li><a href="/#/sastavki/">Състав</a></li>
            <li><a href="/#/testosteron/">Тестостерон</a></li>
            <li><a href="/#/vuprosi/">FAQ</a></li>
            <li><a href="/#/mnenia/">Мнения</a></li>
            <li class="lastli"><a href="/#/porachka/">ПОРЪЧАЙ</a></li>
        </ul>

So how to add "active" to it? may be with some javascript? or PHP? i did try several answers here in the website: i did try this(doesnt work)

also i tried this(doesnt work)

and this(no success) ; and finally this Nothing seems to work. I am probably doing something essential wrong - please help - thanks!

PS:this didnt work too

To explain in recap what i need:

I want to add class "active" to the current menu item(current page). Not only to one of the pages, but to any active . I need something to detect the current page and add a class to it(on the

or on the element - whatever).

doesnt matter, to "a" or to "li" element - i want to add it when the current page is open only to it- like every menu there is... — Plamen Rashkov, Sep 26 '17 at 11:18

score 1 · Answer 1 · answered Nov 04 '18 at 14:41

Just adding on current answers, this is how I did that with vanilla JavaScript:

const currentPage = location.href;
const allAs = document.querySelectorAll('a');
const allAsLength = allAs.length

for (let i = 0; i < allAsLength; i++) {
  if ( allAs[i].href === currentPage ) {
    allAs[i].className = "active";
  }
}

score 0 · Answer 2 · answered Sep 26 '17 at 11:32

Use simple Css to do that. use active class only on that li. and give the class css, like give it (Font-weight:bold; color:something;...etc). you have seprate pages for every link i guess. so when user goes to that link(that page). only that list will be have class active

Nandan Bhat · Answer 3 · 2017-09-26T12:03:06.000

0

If you use jQuery,

Place the following code in a common javascript file which can be accessed by all the pages.

Get the ending of URL and use the same as ID for respected <a> element

url = window.location.href; //Get the current URL.
id = url.split("/").splice(-1);
if(id == ""){
    id = url.split("/").splice(-2); //URL ending with "/"
}
if(id != "" || type(id) != "undefined"){
    $(".menuul #"+id).addClass("current");
}else{
    $(".menuul li:first-child a").addClass("current");
}

In your HTML :

<ul class="menuul">
          <li><a href="/#/" class="current">Начало</a></li>
          <li><a id="muskulnamasa" href="/#/muskulnamasa/">Действие</a></li>
          <li><a id="sastavki" href="/#/sastavki/">Състав</a></li>
          <li><a id="testosteron" href="/#/testosteron/">Тестостерон</a></li>
          <li><a id="vuprosi" href="/#/vuprosi/">FAQ</a></li>
          <li><a id="mnenia" href="/#/mnenia/">Мнения</a></li>
          <li id="porachka" class="lastli"><a href="/#/porachka/">ПОРЪЧАЙ</a></li>
</ul>

CSS :

Style your current CSS class accordingly.

edited Sep 26 '17 at 12:03

answered Sep 26 '17 at 11:34

Nandan Bhat

1,573
2
9
21

so i couldn't make it work - i am not sure what you mean in this step: "Get the ending of URL and use the same as ID for respected element" – Plamen Rashkov Sep 26 '17 at 11:55
Example for this link `href="/#/sastavki/"`, the URL should end with `/sastavki/`. – Nandan Bhat Sep 26 '17 at 12:01
but - i think you misunderstood me. i want to add class "active" to the current menu item(current page). Not only to one of the pages - this i can do with the html. I need something to detect the current page and add a class to it. – Plamen Rashkov Sep 26 '17 at 12:03
`Link1 | Link2 | Link3 | Link4` In this case, you want to add `current` class to `Link3` anchor tag if user is in `Link3` page. Am I right ? – Nandan Bhat Sep 26 '17 at 12:04
` I need something to detect the current page and add a class to it.` >> That code should work. – Nandan Bhat Sep 26 '17 at 12:06
yes exactly - but it doesn't... i putted it in a file menu-active-file.js and pointed for it in the footer: – Plamen Rashkov Sep 26 '17 at 12:08
If you are using chrome, Right click > Inspect Elements > Console. Do you have any errors ? – Nandan Bhat Sep 26 '17 at 12:10
nope - its empty - if you want, i can give you the real url, so u can check? – Plamen Rashkov Sep 26 '17 at 12:12
Ok, Let me check ! – Nandan Bhat Sep 26 '17 at 12:14
I see an error in the console. I.e `Uncaught Error: Syntax error, unrecognized expression: .menuul ,` – Nandan Bhat Sep 26 '17 at 12:17
well - how to fix it? – Plamen Rashkov Sep 26 '17 at 12:18
Search for `.menuul ,` and you'll get some idea. `.menuul ` is a CSS class and it look slike you are using it directly in JavaScript code. – Nandan Bhat Sep 26 '17 at 12:20
Try commenting `$(".menuul #"+id).addClass("current");` and ` $(".menuul li:first-child a").addClass("current");` and try alerting the id – Nandan Bhat Sep 26 '17 at 12:27

score 0 · Answer 4 · answered Sep 26 '17 at 11:46

You can achieve this with a simple loop through the result of document.querySelectorAll().
inside the loop you have to compare the href of the element (<a> tag) with the location.href.

Note that in the example below I have used an hard-coded string instead of location.href in the example below.

var x = document.querySelectorAll('.menuul > li > a');
for (var i = 0; i < x.length; i++) {
  if (x[i].href == "https://stacksnippets.net/#/") {
    x[i].className += ' active';
  }
  console.log(i + ' has the classes: ' + x[i].className);
}

.active {
  color: red;
}

<ul class="menuul">
  <li><a href="/#/" class="current">Начало</a></li>
  <li><a href="/#/muskulnamasa/">Действие</a></li>
  <li><a href="/#/sastavki/">Състав</a></li>
  <li><a href="/#/testosteron/">Тестостерон</a></li>
  <li><a href="/#/vuprosi/">FAQ</a></li>
  <li><a href="/#/mnenia/">Мнения</a></li>
  <li class="lastli"><a href="/#/porachka/">ПОРЪЧАЙ</a></li>
</ul>

@PlamenRashkov are you sure the javascript runs on every page in your website? — Kevin Kloet, Sep 26 '17 at 12:48

score 0 · Answer 5 · answered Sep 26 '17 at 12:52

ohh - it took me 4-5 hours to find it, so ... i paste the answer here- may be some1 can use it. i putted the following code in a file menu-active-file.js and pointed for it in the footer:

 $(function () {
    var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");  
    $('a').each(function () {
                        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
        }
    });
});

Thanks for all the answers anyway.

How to add an active class on a current menu item page? html

5 Answers5

Linked