You should just use the tabs select method and let the plugin do its work instead of poking around with classes (internally a few more things than just classes get changed when selecting a tab).
http://docs.jquery.com/UI/Tabs/tabs#.22select.22index That being said, I propose: var $acc = $("#acc a").click(function() { $('#reporttabs').tabs('select', $acc.index(this)); return false; }); That's it. It relies on the links in #acc being in the same order as the tabs, but if you'd use reasonable fragment identifiers (so you'd even cared about graceful degradation) in #acc, e.g. the same as used for the tabs themselves, that wouldn't be required and it would become even easier: $("#acc a").click(function() { $('#reporttabs').tabs('select', this.hash); return false; }); --Klaus $("#statementsform").removeClass("ui-tabs-panel ui-tabs- hide").addClass("ui-tabs-panel"); $("#compreportform").addClass("ui-tabs-panel ui-tabs-hide"); $("#fundsumform").addClass("ui-tabs-panel ui-tabs-hide"); $("#monthsumform").addClass("ui-tabs-panel ui-tabs-hide"); $("#docsform").addClass("ui-tabs-panel ui-tabs-hide"); }); On 22 Okt., 21:49, ".chris" <[EMAIL PROTECTED]> wrote: > There actually might be a simpler way to accomplish this, but my first > instinct is the each() method. You may want to note that I am very new > to jQuery, so there's a good chance that instinct is way incorrect. > > Anyway, I'm building a small web application for a financial > institution. It consists of two columns. In the left column is the > navigation. The right is the body, set up in jQuery's Tabs. > > I have a list of reports on the left that users can access. When a > user clicks on the report, I want it the appropriate tab to show in > the right column. Make sense? > > Here's the html of the "accounting" section in the left column: > > <ul id="acc"> > <li id="acccomp" class="alt"><a href="#">Completion Report</a></li> > <li id="accstate"><a href="#">Statements</a></li> > <li id="accfundsum" class="alt"><a href="#">Fund Summary</a></li> > <li id="accmonthsum"><a href="#">Month End Summary</a></li> > <li id="accdocs" class="alt"><a href="#">Docs Pending</a></li> > </ul> > > The tabs I have set up: > > <ul id="reporttabs"> > <li id="compreporttab"><a href="#compreportform"><span>Tab1</span></ > a></li> > <li id="statementstab"><a href="#statementsform"><span>Tab2</span></ > a></li> > <li id="fundsumtab"><a href="#fundsumform"><span>Tab3</span></a></ > li> > <li id="monthsumtab"><a href="#monthsumform"><span>Tab4</span></a></ > li> > <li id="docstab"><a href="#docsform"><span>Tab5</span></a></li> > </ul> > > And the jQuery that I have in place at the moment that works perfectly > fine. This will cause the "Statements" tab to be visible when the > "Statements" link is clicked in the left column. > > $("#accstate").click(function(){ > $("#statementsform").removeClass("ui-tabs-panel ui-tabs- > hide").addClass("ui-tabs-panel"); > $("#compreportform").addClass("ui-tabs-panel ui-tabs-hide"); > $("#fundsumform").addClass("ui-tabs-panel ui-tabs-hide"); > $("#monthsumform").addClass("ui-tabs-panel ui-tabs-hide"); > $("#docsform").addClass("ui-tabs-panel ui-tabs-hide"); > > }); > > As you can see, all I am doing is adding/removing the appropriate show/ > hide classes in order to show the appropriate tab, but obviously my > code is going to become extremely cumbersome. Now, I was thinking I > could just loop through each tab and hide everything except the one I > want, but I'm just running into a roadblock in getting that to work. I > thought I could just add something like this inside my click function: > > $("#reporttabs li.a").each(function(){ > $(this).addClass("ui-tabs-panel ui-tabs-hide") > > }) > > But it doesn't seem to work. Am I on the right path with using Each()? --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
