Thanks, ocyrus!
That helped! ...it does take dismayingly long for posts to show up
here.
On Jan 29, 1:49 pm, ocyrus <[EMAIL PROTECTED]> wrote:
> I recently solved this solution this way,
>
> $(document).ready(function(){
> $('#profile-nav').children().each(function(){
> $(this).click(function(){
> toggleTabs($(this));
> return false;
> });
> });
>
> });
>
> function toggleTabs(tab) {
> tab.siblings().children().removeClass('on');
> tab.children().addClass('on');
> var div = tab.attr('class');
> div = div.split('-');
> div = div[1];
> $('#'+div).parent().children().each(function(){
> $(this).hide();
> });
> $('#'+div).show();
>
> }
>
> and my html looks like this.
>
> <ul id="profile-nav" class="clearfix">
> <li class="tab-biography"><a href="#" class="on">Biography</a></li>
> <li class="tab-background"><a href="#">Background</a></li>
> <li class="tab-contact"><a href="#">Contact</a></li>
> </ul>
>
> with three divs later
>
> <div id="biography" class="pro-tab">Info</div>
> <div id="background" class="pro-tab">Info</div>
> <div id="contact" class="pro-tab">Info</div>
>
> On Jan 29, 9:46 am, studiobl <[EMAIL PROTECTED]> wrote:
>
> > I have a set of tabs that use the sliding doors technique. The tabs
> > are built on an unordered list, with each tab being a list item
> > containing an anchor. Each tab is decorated by placing a graphic in
> > the background of its list item for the left part of the tab, and the
> > background of the anchor for the right side of the tab. These
> > graphics then need to be switched out to display the "active" view.
> > The actual html page is not changed. This tab navigation just
> > triggers the visibility of various areas of the page.
>
> > I'm trying to use jQuery to switch out the graphics. The problem I'm
> > having is in selecting the list item that contains the clicked-on
> > anchor. There are a number of techniques for selecting children, but
> > none for selecting parents.
>
> > One question I have is if there is any way to reference a previously
> > selected element in a jQuery selector statement. Like this:
>
> > $(".tabs a").click(function(){
> > //Now you can reference the clicked on anchor as "this"
> > $(".tabs li:has(this)").doSomething();
>
> > });
>
> > I doubt that this is possible, I haven't tested it yet, but I can't
> > think of too many other options.
>
> > Any suggestions?
