javascript - Target tabs within tabs with #hash URL (or otherwise) - Stack Overflow

admin管理员组

文章数量:1327677

I am using the jQuery Tools library Tabs. You can find them here: .html

My basic markup is something like this:

$("#tab-holder ul").tabs("div.tab", { history: true, api: true })
$("#profile-sub-tabs ul.menu").tabs("div");

The #profile-sub-tabs is another tab interface within the main #tab-holder interface. The plugin is using a parameter called history which basically allows me to target the tabs using their names, for example:

.aspx#account

Would lead me to the account tab. This works fine, but I want to be able to target sub-tabs specifically. I know this code does not work, but the theory is something like this:

.aspx#account#profile

Leads me to the account->profile tab. Simple enough.

Now I'm not sure if this is possibly to do through the URL, or if I should just somehow handle the requests via Javascript (somehow) and manually use the API to switch to the correct tabs. I'm just not sure how I would go about grabbing that data to switch to the correct tab.

Thanks!

I am using the jQuery Tools library Tabs. You can find them here: http://flowplayer/tools/tabs/index.html

My basic markup is something like this:

$("#tab-holder ul").tabs("div.tab", { history: true, api: true })
$("#profile-sub-tabs ul.menu").tabs("div");

The #profile-sub-tabs is another tab interface within the main #tab-holder interface. The plugin is using a parameter called history which basically allows me to target the tabs using their names, for example:

http://www.blah./tabs.aspx#account

Would lead me to the account tab. This works fine, but I want to be able to target sub-tabs specifically. I know this code does not work, but the theory is something like this:

http://www.blah./tabs.aspx#account#profile

Leads me to the account->profile tab. Simple enough.

Now I'm not sure if this is possibly to do through the URL, or if I should just somehow handle the requests via Javascript (somehow) and manually use the API to switch to the correct tabs. I'm just not sure how I would go about grabbing that data to switch to the correct tab.

Thanks!

• javascript
• jquery
• html
• url
• hash

Share Improve this question Follow asked Oct 7, 2010 at 17:07 dmackermandmackerman 2,96655 gold badges2727 silver badges4444 bronze badges 2

• Is there a particular reason you went with a third-party library instead of jQueryUI for this? – Ender Commented Oct 7, 2010 at 17:13
• jQueryUI doesn't have the native ability to add #hash to the URL for tab switching, I looked. There are a lot of solutions on SO for it, but none of them worked for me. jQuery Tools carries it natively, I could style it however I wanted (don't care about ThemeRoller), and the API is just as powerful. I suppose the main question I have is how can I specify a URL that will essentially contain 2 parameters? Maybe I should switch to just using querystrings? – dmackerman Commented Oct 7, 2010 at 17:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

There doesn't seem to be an official solution for this problem. I've managed to roll one myself, which will work as long as you can assign a unique ID to each sub-tab.

The idea is basically that you don't actually need to tell the page which top tab to open, because it can be inferred from looking for the sub-tab that is being requested. So in your link, you would only need to reference the sub-tab, like so:

http://www.blah./tabs.aspx#profile

Before I get started, here's a live demo showing this in action: http://jsfiddle/CrAU7/

Let's say you have an html structure like so:

<div class="wrap">
    <!-- the tabs -->
    <ul class="tabs">
        <li><a href="#big1">Tab 1</a></li>
        <li><a href="#big2">Tab 2</a></li>
        <li><a href="#big3">Tab 3</a></li>
    </ul>
    <!-- tab "panes" -->
    <div class="pane" id="big1">
        <p>#1</p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big1small1">Tab 1</a></li>
            <li><a href="#big1small2">Tab 2</a></li>
            <li><a href="#big1small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big1small1">Tab 1 - First tab content.</div>
        <div class="pane" id="big1small2">Tab 1 - Second tab content</div>
        <div class="pane" id="big1small3">Tab 1 - Third tab content</div>
    </div>
    <div class="pane" id="big2">
        <p>#2</p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big2small1">Tab 1</a></li>
            <li><a href="#big2small2">Tab 2</a></li>
            <li><a href="#big2small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big2small1">Tab 2 - First tab content.</div>
        <div class="pane" id="big2small2">Tab 2 - Second tab content</div>
        <div class="pane" id="big2small3">Tab 2 - Third tab content</div>
    </div>
    <div class="pane" id="big3">
        <p>#3    </p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big3small1">Tab 1</a></li>
            <li><a href="#big3small2">Tab 2</a></li>
            <li><a href="#big3small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big3small1">Tab 3 - First tab content.</div>
        <div class="pane" id="big3small2">Tab 3 - Second tab content</div>
        <div class="pane" id="big3small3">Tab 3 - Third tab content</div>
    </div>
</div>

The important thing to note is that I've given tab pane a unique ID, and the tab's href is the same ID, prefixed with a hash. Then you'll need a function like this:

function TabByHash(hash) {
    var $myTab = $(hash);
    if ($myTab.size() != 0) {
        //alert('hi!');
        var $topTab = $myTab.parent().closest('.pane');
        if ($topTab.size() != 0) {
            $('a[href=#' + $topTab.attr('id') + ']').click();
        }
        $('a[href=#' + $myTab.attr('id') + ']').click();
    }
}

On page load, you'll want to call the function with the hash part of the url: TabByHash(window.location.hash); This then looks for a tab pane with the corresponding ID. If the pane is located within a parent pane, it first activates that parent pane, then activates the requested pane. Otherwise it simply activates the requested pane. Hopefully this will do the trick for you.

NOTE: Due to restrictions on the jsFiddle demo, I bound the TabByHash function to anchor clicks, but in your situation, you will want to just call it on page load.

本文标签： javascriptTarget tabs within tabs with hash URL (or otherwise)Stack Overflow