1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Active state tabs

Discussion in 'Styling and Customization Questions' started by RichardKYA, Apr 29, 2015.

  1. RichardKYA

    RichardKYA Well-Known Member


    I've created this navigation bar for a few of my pages and I'm having trouble with what to put in the top 3 links so that they have the active class applied when on page, I've tried a couple of things, but they didn't work.

    Whenever I search for something on this, it just seems to point me to a "Nodes as tabs" add-on, which doesn't look like what I need.

    Can anyone help me please?

    <ul class="member_notable_tabs tabs">
       <li><a href="{xen:link online, '', 'type=registered'}">{xen:phrase members}</a></li>
       <li><a href="{xen:link account/following}">{xen:phrase people_you_follow}</a></li>
       <li><a href="{xen:link account/ignored}">{xen:phrase people_you_ignore}</a></li>
       <li class="{xen:if '{$type} == "messages"', active}"><a href="{xen:link members}">{xen:phrase most_messages}</a></li>
       <li class="{xen:if '{$type} == "likes"', active}"><a href="{xen:link members, '', 'type=likes'}">{xen:phrase most_likes}</a></li>
       <li class="{xen:if '{$type} == "best_answers"', active}"><a href="{xen:link members, '', 'type=best_answers'}">{xen:phrase most_best_answers}</a></li>
       <xen:if is="{$canViewFeaturedThreads} AND {$xenOptions.ctaFtNotableMembersTab}">
       <li class="{xen:if '{$type} == "cta_featured_threads"', active}"><a href="{xen:link members, '', 'type=cta_featured_threads'}">{xen:phrase cta_ft_most_featured_threads}</a></li>
    Here's a couple of pics to help explain what I'm after...

    You can see in the title what page I'm on and you can see where the tab is active when on "Most Messages" and you can see that tab doesn't stay active when on "Online now"...

    Screen Shot 2015-04-29 at 01.53.01.jpg Screen Shot 2015-04-29 at 01.53.21.jpg

    Thank you :)
  2. Brogan

    Brogan XenForo Moderator Staff Member

    This is what sets the active class:
    {xen:if '{$type} == "cta_featured_threads"', active}
    With 'type' referencing the URL: members/?type=cta_featured_threads
  3. RichardKYA

    RichardKYA Well-Known Member

    Hi Brogan,

    I had tried that before with the tabs, this is what I put in the members "online now" tab, but it doesn't work for me, have I missed something?

    <li class="{xen:if '{$type} == "registered"', active}"><a href="{xen:link online, '', 'type=registered'}">{xen:phrase members}</a></li>
    I'm also not sure what to put with the account/following and account/ignored links either. I've tried a few things, like {xen:if '{$type} == "following"', active} , {xen:if '{$type} == "account_following"', active} and a couple of others. But I'm obviously getting that wrong as well lol

    Thank you for your help :)
  4. Brogan

    Brogan XenForo Moderator Staff Member

    The type is defined in the php code.
  5. htweet

    htweet Member

    @RichardKYA have you been ableto find solution to your question? If yes, can you help me out please?
  6. RichardKYA

    RichardKYA Well-Known Member

    I think I just set the variable in the template in the end, like so...

    <xen:set var="$activeTab">3</xen:set>
    ...and then in the relevant link, just add

    {xen:if '{$activeTab} == 3', ' class="active"'}
    You can change "3" to whatever you want

Share This Page