Hello, I am building a tab interface for a web page, and I want to be able to link to the individual tabs' content. I figured out quickly I could use the hash tags from each of the tab sections appended to the url, but that scrolled the page to a place where the tabs themselves were not visible.
I found this article that showed how to use the scrollTo and localScroll plugins to scroll the page to the top of the tabs and make them visible, so far so good. The problem comes when I try to set up a second set of tabs. this page has enough content that I am going to need 3-4 sections. Here is a link to the page in progress: http://www.easycareinc.com/Cool_Stuff/newvids1.aspx I can't seem to figure out how to scroll to the different tab sections with external links. I tried giving both tab sections the same class and using the single original function that worked with just one tab set function. I made sure to give each tab it's own unique anchor tag so they could be linked to separately: <!--------- tabs script---------> $(document).ready( function(){ $(".video-tabs").tabs(); if($(".video-tabs") && document.location.hash){ $.scrollTo(".video-tabs"); } $(".video-tabs ul").localScroll({ target:".video-tabs", duration:0, hash:true }); }); <!-----html------------> <div class="video-tabs"> <ul> <li><A href="#glove">Glove</a></li> <li><A href="#glue-on">Glue-On</A></li> <li><A href="#edge">Edge</a></li> <li><A href="#rx">Rx</a></li> <li><A href="#easyboot">Easyboot</a></li> <li><A href="#epic">Epic</a></li> </ul> <div id="glove"></div> etc.... </div> <div class="video-tabs"> <ul> <li><A href="#grip">Grip</a></li> <li><A href="#bare">Bare</A></li> <li><A href="#boa">Boa</a></li> <li><A href="#om">Old Mac's</a></li> </ul> <div id="grip"></div> etc.... </div> -------------------------------------------------- Using the method above, if I tried to use a link to a tab ( http://www.domain.com/#grip ) it would work for the first section of tabs, but would not scroll to the second section. The proper tab in the second section would open, but the page would only scroll to the first tab section. So I tried uniquely naming the tab sections like this: <!--------- tabs script---------> $(document).ready( function(){ $(".video-tabs1").tabs(); $(".video-tabs2").tabs(); if($(".video-tabs1") && document.location.hash){ $.scrollTo(".video-tabs1"); } $(".video-tabs1 ul").localScroll({ target:".video-tabs1", duration:0, hash:true }); if($(".video-tabs2") && document.location.hash){ $.scrollTo(".video-tabs2"); } $(".video-tabs2 ul").localScroll({ target:".video-tabs2", duration:0, hash:true }); }); <!-----html------------> <div class="video-tabs1"> <ul> <li><A href="#glove">Glove</a></li> <li><A href="#glue-on">Glue-On</A></li> <li><A href="#edge">Edge</a></li> <li><A href="#rx">Rx</a></li> <li><A href="#easyboot">Easyboot</a></li> <li><A href="#epic">Epic</a></li> </ul> <div id="glove"></div> etc.... </div> <div class="video-tabs2"> <ul> <li><A href="#grip">Grip</a></li> <li><A href="#bare">Bare</A></li> <li><A href="#boa">Boa</a></li> <li><A href="#om">Old Mac's</a></li> </ul> <div id="grip"></div> etc.... </div> --------------------------------------------- Doing it this way, every link would scroll the page to the second set of tabs. Any idea how to select and scroll to a specific tab set, depending on which tab is linked to? Thank you --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
