Link to home
Start Free TrialLog in
Avatar of JT_SIRO
JT_SIRO

asked on

How do I navigate to a specific Tab?

You may not be able to answer this question without seeing my entire site template, but maybe it's simpler than that, so I'll post this...

I just bought a CSS template (called Slate Admin from ThemeForest.com) and re-skinned my site.  I implemented their tabbing feature that navigates to a specific tab within the HTML file (or aspx in my case).  The Navigation menu code is:

                        <ul class="portlet-tab-nav">
                              <li class="portlet-tab-nav-active"><a href="#tab1" rel="tooltip">Pending Tracks</a></li>                        
                              <li class=""><a href="#tab2" rel="tooltip">Tracks the need Metadata </a></li>
                              <li class=""><a href="#tab3" rel="tooltip">Active Tracks</a></li>
                        </ul>


The HREF's navigate to these div elements:
                        <div id="tab1" class="portlet-tab-content portlet-tab-content-active"></div>
                        <div id="tab2" class="portlet-tab-content portlet-tab-content-active"></div>
                        <div id="tab3" class="portlet-tab-content portlet-tab-content-active"></div>

My question is, how do I navigate to tab2 from another page within my app?  I tried the following, and it just goes to the default of tab1:

http://xyz.com/MyMusic.aspx#tab2
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Firefox might do that but IE only goes to references on the same page.  This <a href="#tab2"> is defined by the standards as a link to <a name="tab2"> on the same page.  I'm a little surprised that it will go to a div with that id but it does in Firefox.
I believe to make this work, you need to use the URL of the page it is on plus the anchor name, like this:

<a href="http://yoursitename.com/pageurl#tab1" rel="tooltip">Pending Tracks</a>
NOTE:
The above only works for anchors on another page. For anchors in the same page simply use:
#footer (this would take you to the footer on that page, assuming you have a div id="footer" in your footer.php template.
ASKER CERTIFIED SOLUTION
Avatar of Gary Davis
Gary Davis
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial