[jQuery] Re: Tab Effect
Hey no problem, and yea. I think they are moderated
On Jan 30, 2008 7:23 AM, studiobl <[EMAIL PROTECTED]> wrote:
>
> 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.
> >
> >
> > class="on">Biography
> > Background
> > Contact
> >
> >
> > with three divs later
> >
> > Info
> > Info
> > Info
> >
> > 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?
>
[jQuery] Re: Tab Effect
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.
>
>
> Biography
> Background
> Contact
>
>
> with three divs later
>
> Info
> Info
> Info
>
> 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?
[jQuery] Re: Tab Effect
Biography
Background
Contact
$(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?
[jQuery] Re: Tab Effect
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.
Biography
Background
Contact
with three divs later
Info
Info
Info
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?
