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

Changing the defualt selected Tab?

Jaxel

Well-known member
#1
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:

Itworx4me

Well-known member
#2
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
 

lol768

Active member
#4
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.
 

Jaxel

Well-known member
#6
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.
 

Daniel Hood

Well-known member
#7
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.
 

Aayush Agrawal

Well-known member
#8
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');