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
-~----------~----~----~----~------~----~------~--~---
