Changing the defualt selected Tab?

Jaxel

Well-known member
I am using XenForo's built in Tab javascript:
Code:
<ul class="tabs mainTabs Tabs" data-panes="#tabPanes > li">
    <li><a href="{$requestPaths.requestUri}#tab1">tab1</a></li>
    <li><a href="{$requestPaths.requestUri}#tab2">tab2<a/></li>
</ul>

<ul id="tabPanes">
    <li id="tab1">Stuff</li>
    <li id="tab2">More...</li>
</ul>

By default, the first tab is selected. Would it be possible for me to set the second tab as selected? I know I can re-arrange the order of the tabs, but I want the order to be in a specific way.

I thought it would have been as simple as adding class="active" to the second tab; but that doesn't work. The javascript removes the class and adds it to the first tab.
 
Last edited:
I am using XenForo's built in Tab javascript:
Code:
<ul class="tabs mainTabs Tabs" data-panes="#tabPanes > li">
    <li><a href="{$requestPaths.requestUri}#tab1">tab1</a></li>
    <li><a href="{$requestPaths.requestUri}#tab2">tab2<a/></li>
</ul>

<ul id="tabPanes">
    <li id="tab1">Stuff</li>
    <li id="tab2">More...</li>
</ul>

By default, the first tab is selected. Would it be possible for me to set the second tab as selected? I know I can re-arrange the order of the tabs, but I want the order to be in a specific way.

I thought it would have been as simple as adding class="active" to the second tab; but that doesn't work. The javascript removes the class and adds it to the first tab.
http://stackoverflow.com/questions/20403892/change-active-tab-using-jquery
 
Setting class="active" on the <a> tag of the tab I want to have loaded first works fine for me. I tried it with the member_view tabs on my local development installation.
 
Setting class="active" on the <a> tag of the tab I want to have loaded first works fine for me. I tried it with the member_view tabs on my local development installation.
I tried it but the javascript resets it.
 
Setting class="active" on the <a> tag of the tab I want to have loaded first works fine for me. I tried it with the member_view tabs on my local development installation.
Doesn't work for me at all... I just opened member_view...

replaced:
Code:
<li><a href="{$requestPaths.requestUri}#info">{xen:phrase information}</a></li>
with:
Code:
<li class="active"><a href="{$requestPaths.requestUri}#info">{xen:phrase information}</a></li>

Didn't work. The profile posts tab is still the loaded tab.
 
I just opened member_view; changed the tabs to:
Code:
<li><a class="active" href="{$requestPaths.requestUri}#info">{xen:phrase information}</a></li>
and the result is

http://xenmods.com/members/daniel-hood.1/

If it's not working on your site, check your javascript console. Also, since this relies on javascript.. you may want to edit the html to change which tab is opened, this is essentially just loading the page, after it's loaded it switches the tab to the one with the active class.
 
Set "class=active" on <a> tag. If you are not using <a> tag, then set on <li> tag.

Code:
            var $tabs = $tabContainer.find('a');
            if (!$tabs.length)
            {
                $tabs = $tabContainer.children();
            }
            var $active = $tabs.filter('.active');
 
Back
Top Bottom