troubleshooting Question

How to keep parent tab selected when nested tab is clicked?

Avatar of evibesmusic
evibesmusicFlag for United States of America asked on
jQueryMobileJavaScript
8 Comments1 Solution156 ViewsLast Modified:
Experts,

I am using the jQueryMobile framework.

I'm nesting tabs using the code below. When clicked the "Facility" tab reveals the nested tabs and loads the content for the "Source 1" tab.

The issue I am trying to solve is two fold:

1) I want to make sure that the "Source 1" tab is activated when the "Facility" tab is selected because the "Source 1" content loads by default.

2) If any of the nested tabs are selected (Source 1, Source 2, Source 3,...Source 7) I want to ensure the "Facility" tab remains selected.

I assume that this is best done by modifying the CSS with jQuery but, I am not sure.

Any help would be appreciated.

<!-- TAB CONTENT -->
<div data-role="tabs" id="tabs">
    <!-- MAIN HEADER NAVIAGATION -->
    <div data-role="navbar">
        <ul>
            <li><a href="scripts/content.php?by_source" data-ajax="false" class="ui-btn-active">Resource</a></li>
            <li><a href="#facility" data-ajax="false" id="departments_by_facility_tab">Facility</a></li>
        </ul>
    </div>
    <!-- END MAIN HEADER NAVIGATION -->
    
    <!-- FACILITY TAB -->
    <div id="facility">
        <div data-role="tabs" id="facility_tabs">
            <div data-role="navbar">
                 <ul>
                    <li><a href="scripts/content.php?source=1" data-ajax="false" class="ui-btn ui-shadow">Source 1</a></li>
                    <li><a href="scripts/content.php?source=2" data-ajax="false" class="ui-btn ui-shadow">Source 2</a></li>
                    <li><a href="scripts/content.php?source=3" data-ajax="false" class="ui-btn ui-shadow">Source 3</a></li>
                    <li><a href="scripts/content.php?source=4" data-ajax="false" class="ui-btn ui-shadow">Source 4</a></li>
                    <li><a href="scripts/content.php?source=5" data-ajax="false" class="ui-btn ui-shadow">Source 5</a></li>
                    <li><a href="scripts/content.php?source=6" data-ajax="false" class="ui-btn ui-shadow">Source 6</a></li>
                    <li id="mdo_tab"><a href="scripts/content.php?source=7" data-ajax="false" class="ui-btn ui-shadow">Source 7</a></li>
                </ul>
            </div>
        </div>
    </div>              
    <!-- END FACILITY TAB -->
</div>
<!-- END TAB CONTENT -->
ASKER CERTIFIED SOLUTION
evibesmusic

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros