Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Menu

How To Add An Active Class On A Current Menu Item Page? Html

Post a Comment
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 :

  • Solution 1:

    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


    Solution 2:

    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>

    Solution 3:

    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.


    Solution 4:

    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.


You may like these posts

Post a Comment for "How To Add An Active Class On A Current Menu Item Page? Html"