The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

javascript active class code request

3 posters

Go down

Solved javascript active class code request

Post by assemDz Thu 17 Aug 2017, 18:14

Hi Hello ,
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 ..
assemDz
assemDz
New Member

Male Posts : 8
Reputation : 1
Language : English

http://www.educmotamayiz.com

Back to top Go down

Solved Re: javascript active class code request

Post by SLGray Thu 17 Aug 2017, 18:25

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


javascript active class code request Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: javascript active class code request

Post by assemDz Thu 17 Aug 2017, 18:43

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
assemDz
assemDz
New Member

Male Posts : 8
Reputation : 1
Language : English

http://www.educmotamayiz.com

Back to top Go down

Solved Re: javascript active class code request

Post by Guest Thu 17 Aug 2017, 19:58

Hi,

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


Back to top Go down

Solved Re: javascript active class code request

Post by assemDz Thu 17 Aug 2017, 21:46

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"
assemDz
assemDz
New Member

Male Posts : 8
Reputation : 1
Language : English

http://www.educmotamayiz.com

Back to top Go down

Solved Re: javascript active class code request

Post by Guest Fri 18 Aug 2017, 07:01

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


Back to top Go down

Solved Re: javascript active class code request

Post by assemDz Fri 18 Aug 2017, 10:24

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>
assemDz
assemDz
New Member

Male Posts : 8
Reputation : 1
Language : English

http://www.educmotamayiz.com

Back to top Go down

Solved Re: javascript active class code request

Post by Guest Fri 18 Aug 2017, 12:29

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


Back to top Go down

Solved Re: javascript active class code request

Post by assemDz Sat 19 Aug 2017, 10:54

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

Male Posts : 8
Reputation : 1
Language : English

http://www.educmotamayiz.com

Back to top Go down

Solved Re: javascript active class code request

Post by Guest Sat 19 Aug 2017, 21:28

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>
avatar
Guest
Guest


Back to top Go down

Solved Re: javascript active class code request

Post by assemDz Sat 19 Aug 2017, 22:20

thank u so much  Doff
solved !
assemDz
assemDz
New Member

Male Posts : 8
Reputation : 1
Language : English

http://www.educmotamayiz.com

Back to top Go down

Solved Re: javascript active class code request

Post by Draxion Sat 19 Aug 2017, 22:59

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum