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.
The forum of the forums
3 posters

    javascript active class code request

    assemDz
    assemDz
    New Member


    Male Posts : 8
    Reputation : 1
    Language : English

    Solved javascript active class code request

    Post by assemDz Thu 17 Aug - 19: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 ..
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51498
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: javascript active class code request

    Post by SLGray Thu 17 Aug - 19: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.
    assemDz
    assemDz
    New Member


    Male Posts : 8
    Reputation : 1
    Language : English

    Solved Re: javascript active class code request

    Post by assemDz Thu 17 Aug - 19: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
    avatar
    Guest
    Guest


    Solved Re: javascript active class code request

    Post by Guest Thu 17 Aug - 20:58

    Hi,

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


    Male Posts : 8
    Reputation : 1
    Language : English

    Solved Re: javascript active class code request

    Post by assemDz Thu 17 Aug - 22: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"
    avatar
    Guest
    Guest


    Solved Re: javascript active class code request

    Post by Guest Fri 18 Aug - 8: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.
    assemDz
    assemDz
    New Member


    Male Posts : 8
    Reputation : 1
    Language : English

    Solved Re: javascript active class code request

    Post by assemDz Fri 18 Aug - 11: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>
    avatar
    Guest
    Guest


    Solved Re: javascript active class code request

    Post by Guest Fri 18 Aug - 13: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);
            })
    assemDz
    assemDz
    New Member


    Male Posts : 8
    Reputation : 1
    Language : English

    Solved Re: javascript active class code request

    Post by assemDz Sat 19 Aug - 11: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
    avatar
    Guest
    Guest


    Solved Re: javascript active class code request

    Post by Guest Sat 19 Aug - 22: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>
    assemDz
    assemDz
    New Member


    Male Posts : 8
    Reputation : 1
    Language : English

    Solved Re: javascript active class code request

    Post by assemDz Sat 19 Aug - 23:20

    thank u so much  Doff
    solved !
    Draxion
    Draxion
    Helper
    Helper


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

    Solved Re: javascript active class code request

    Post by Draxion Sat 19 Aug - 23:59

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

      Current date/time is Sun 22 Sep - 20:30