CODEWITHSUNDEEP
javascriptjqueryhyperlinktabsnested
Kirill Reva
Kirill Reva

Reputation: 1097

How to make work the jquery nested tab link?

I am having problem with Jquery tabs UI.

<script type="text/javascript">
$(document).ready(function() {
    $('.tabs').tabs();
    $('.subtabs').tabs();
});

<div class="tabs">
   <ul>
       <li><a href="#tab1">Tab1</a></li>
       <li><a href="#tab2">Tab2</a></li>
   </ul>
       <div id="tab1">
            <div class="subtabs">
                <ul>
                    <li><a href="#subtab1">Subtab1</a></li>
                    <li><a href="#subtab2">Subtab2</a></li>
                </ul>
            <div id="subtab1">
                 Some content1
            </div>
            <div id="subtab2">
                 Some content2
            </div>
            </div>

        </div>
       <div id="tab2"></div>
</div>

Now when i try to access subtab like page.html#subtab1 it does not work, but page.html#tab1 works. What am i doing wrong? basically i need to open subtab using URL.

Thanks

Upvotes: 2

Views: 2470

Answers (2)

TheBoef
TheBoef

Reputation: 23

I had the same problem. And I found a JS fix for it. Please note that in your example you had the subtabs in the first tab, the first tab is the default tab that opens. With my fix you can place the subtabs inside any content of the main tab. Check the Plunker for the working example.

http://run.plnkr.co/plunks/Wr91Bm/#subtab2

I created the function openParentTab() and called this right after I created the $('.tabs, .subtabs').tabs();

function openParentTab() {
    locationHash = location.hash.substring( 1 );
    console.log(locationHash);
    // Check if we have an location Hash
    if (locationHash) {
        // Check if the location hash exsist.
        var hash = jQuery('#'+locationHash);
        if (hash.length) {
            // Check of the location Hash is inside a tab.
            if (hash.closest(".tabContent").length) {
                // Grab the index number of the parent tab so we can activate it
                var tabNumber = hash.closest(".tabContent").index();
                jQuery(".tabs.fix").tabs({ active: tabNumber });
            }
        }
    }
}

If you have an big page and you find the focus isnt on the correct subtab you can add the following below jQuery(".tabs.fix").tabs({ active: tabNumber });

hash.get(0).scrollIntoView();
setTimeout(function() {
    hash.get(0).scrollIntoView();
}, 1000);

See code: http://plnkr.co/Wr91Bm

Upvotes: 1

Angel
Angel

Reputation: 1200

You are missing <div id="tab2"></div> which will give a jQuery exception. Try adding that to the code and your links will work.

Upvotes: 1

Related Questions