Targeting Default Tabs

John L.

Well-known member
Hi All,

We are working on a plugin that requires us in the backend to split the viewing of information into tabs (on the admin-side). I took a look at the HTML code generated for tabs and I don't see a way to target a tab after you have done something. So let me explain the scenario:

  1. You login to the backend and visit "Create Cool Node".
  2. You enter in your basic information and save that node.
  3. Once created that node has 3 new tabs (Cool Options, Cool People, and Cool Things).
    1. Note, the default tab is called "General Cool".
  4. You want to create a new cool option so you click on the "Cool Options" tab.
  5. You click to add a new "Cool Option" and fill in that information. Hit Save...
I'll stop the scenario here. Now, when we hit save it takes us to back to the default first tab (General Cool) under "Edit Cool Node". Ideally we would like it to take us to the "Cool Options" tab under "Edit Cool Node". How do we do that? Right now I see no way of targeting those tab, either by URL or some other method. Thanks for the help!

I'll provide screens if this is too confusing.


10$ and you'll get the info:D (Took me 2 days for research... :( )

For example, if you want to set the 3rd tab from the profile as active on pageload:
<script type="text/javascript">
$(document).bind('XenForoActivationComplete', function(){
    $tabContainer = $('#profiletabs');

var $api = $'tabs');
$current = $;

so you'll need your own event, which gets fired after the save and etc... (see my code^^ )
this way i can manipulate the tab via url:
<script type="text/javascript">
    $(document).bind('XenForoActivationComplete', function() {
        $test = document.URL.split("#")[1];
        if ($test && $test == 'invitestab') {
            $tabContainer = $('#ragtektabs');
            var $api = $'tabs');
            $current = $;

now kier & mike need only to implement the url support, so we can set the active tab via URL like in vB and i'm happy:D

John L.

Well-known member
We figured it out, but thanks for the info. :)

I believe URL support is already there, please see jQuery Tools (tabs) for more information.


Active member
This functionality was already built into jQuery Tools. In your tab specification, put a link. For example...

  <li><a href="#tab-1">Tab 1</a></li>
  <li><a href="#tab-2">Tab 2</a></li>
Then if you put #tab-2 on the end of your URL it will take you to that specific tab.