XF 1.4 Active state tabs

RichardKYA

Well-known member
Hello,

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?

Code:
<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>
   </xen:if>
</ul>

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.webp Screen Shot 2015-04-29 at 01.53.21.webp

Thank you :)
 
This is what sets the active class:
Code:
{xen:if '{$type} == "cta_featured_threads"', active}

With 'type' referencing the URL: members/?type=cta_featured_threads
 
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?

Code:
<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 :)
 
I think I just set the variable in the template in the end, like so...

Code:
<xen:set var="$activeTab">3</xen:set>

...and then in the relevant link, just add

Code:
{xen:if '{$activeTab} == 3', ' class="active"'}

You can change "3" to whatever you want
 
Top Bottom