javascript active class code request

by assemDz August 17th 2017, 7:14 pm

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 ..

by **SLGray** August 17th 2017, 7:25 pm

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

by assemDz August 17th 2017, 7:43 pm

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

by Guest August 17th 2017, 8:58 pm

Hi,

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

by assemDz August 17th 2017, 10:46 pm

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"

by Guest August 18th 2017, 8:01 am

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.

by assemDz August 18th 2017, 11:24 am

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 Sad

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>

by Guest August 18th 2017, 1:29 pm

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); })

by assemDz August 19th 2017, 11:54 am

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

by Guest August 19th 2017, 10:28 pm

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>