Hi ,
i need javascript code of active class in menu ( ul list ) based on URL
for example : https://i.servimg.com/u/f11/19/49/30/60/untitl10.png
its help to know what is the current page ..

i'm waiting you ..

Could you explain what you want to achieve with this JavaScript?

SLGray wrote:Could you explain what you want to achieve with this JavaScript?

look here its the same request : how-to-add-active-class-to-navbar
but for me, i have a custom ul list

Hi,

Please post your forum's link here so that I can see what's the selector of the links in your navbar.

Justice™ wrote:Hi,

Please post your forum's link here so that I can see what's the selector of the links in your navbar.

@Justice™ here is : click Here
the active class is "ipsNavBar_active"

Code:

$(function(){
var menu=$("a.mainmenu"), url=location.pathname, class_active="ipsNavBar_active", len=menu.length, i=0;
for(i;i<len;i++){
if(new RegExp(url).test(menu.eq(i).attr("href"))){
menu.eq(i).addClass(class_active);
break;
}
}
if($("."+class_active).length) return;
menu.eq(0).addClass(class_active);
})

Code: class_active="ipsNavBar_active"

You can modify ipsNavBar_active if you want another class for the active link.

Justice wrote:

Code:

$(function(){
var menu=$("a.mainmenu"), url=location.pathname, class_active="ipsNavBar_active", len=menu.length, i=0;
for(i;i<len;i++){
if(new RegExp(url).test(menu.eq(i).attr("href"))){
menu.eq(i).addClass(class_active);
break;
}
}
if($("."+class_active).length) return;
menu.eq(0).addClass(class_active);
})

Code: class_active="ipsNavBar_active"

You can modify ipsNavBar_active if you want another class for the active link.

thank you, but its not work
here is the html code :

Code:


<ul class="ipsResponsive_showDesktop ipsResponsive_block">
      <li class="ipsNavBar_active">
            <a href="/forum">
               forum
            </a>
      </li>
      <li>
            <a href="/t1-">
               about
            </a>
      </li>
      <li>
            <a href="/portal">
               portal
            </a>
      </li>
      <li>
            <a href="/contact">
               contact
            </a>
      </li>
         </ul>


Code:

        $(function(){
        var menu=$(".ipsResponsive_showDesktop.ipsResponsive_block>li>a"), url=location.pathname, class_active="ipsNavBar_active", len=menu.length, i=0;
        for(i;i<len;i++){
        if(new RegExp(url).test(menu.eq(i).attr("href"))){
        menu.eq(i).parent().addClass(class_active);
        break;
        }
        }
        if($("."+class_active).length) return;
        menu.eq(0).addClass(class_active);
        })

thank u very much now its work, but the first li is still active
its mean the active class should be in one li

Replace the HTML code with this:

Code:

       
        <ul class="ipsResponsive_showDesktop ipsResponsive_block">
              <li>
                    <a href="/forum">
                      forum
                    </a>
              </li>
              <li>
                    <a href="/t1-">
                      about
                    </a>
              </li>
              <li>
                    <a href="/portal">
                      portal
                    </a>
              </li>
              <li>
                    <a href="/contact">
                      contact
                    </a>
              </li>
                </ul>

thank u so much 
solved !