<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>
$(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();
}
Thats basically what I did to solve this task, sorry if this gets
double posted, but my response that I posted an hour ago, hasnt shown
up.
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?
