1. 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?

Discussion in 'XenForo Development Discussions' started by Jaxel, May 6, 2015.

  1. Jaxel

    Jaxel Well-Known Member

    I am using XenForo's built in Tab javascript:
    <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 id="tabPanes">
        <li id="tab1">Stuff</li>
        <li id="tab2">More...</li>
    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: May 6, 2015
  2. Itworx4me

    Itworx4me Well-Known Member

  3. Jaxel

    Jaxel Well-Known Member

  4. lol768

    lol768 Active Member

    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.
  5. Jaxel

    Jaxel Well-Known Member

    I tried it but the javascript resets it.
  6. Jaxel

    Jaxel Well-Known Member

    Doesn't work for me at all... I just opened member_view...

    <li><a href="{$requestPaths.requestUri}#info">{xen:phrase information}</a></li>
    <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.
  7. Daniel Hood

    Daniel Hood Well-Known Member

    I just opened member_view; changed the tabs to:
    <li><a class="active" href="{$requestPaths.requestUri}#info">{xen:phrase information}</a></li>
    and the result is


    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.
    Robust and lol768 like this.
  8. Aayush Agrawal

    Aayush Agrawal Well-Known Member

    Set "class=active" on <a> tag. If you are not using <a> tag, then set on <li> tag.

                var $tabs = $tabContainer.find('a');
                if (!$tabs.length)
                    $tabs = $tabContainer.children();
                var $active = $tabs.filter('.active');   

Share This Page