Theres lots of ways to do it, eg:
$(document).ready(function()
{
$('ul#content li a').click(function() { // binds a function
to every link in every list object in the ul called content.
$('ul#content
li').removeClass('active').addClass('inactive'); // removes the class
'active' and adds the class 'inactive' to all the li elements in the
ul call content
this.parent().removeClass('inactive').addClass('active'); // removes
the class 'inactive' and adds the class 'active' to the parent li of
the clicked link.
return false;
});
});
Or you could ditch the links and bind it directly to the li elements
and do:
$(document).ready(function()
{
$('ul#content li').click(function() { // binds a function to
every list object in the ul called content.
this.parent().children('.active').removeClass('active').addClass('inactive'); //
sets all 'active' li objects to inactive
this.removeClass('inactive').addClass('active'); //
set current li to active
return false;
});
});
On Jan 5, 9:45 am, "Yasmary Mora" <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I'm not really sure how to do traversing and such, or even if that's
> what I need to do.
>
> I have these 3 tabs (in list format). I need to make it so that when
> clicking on one of them, it changes the style of the <li> element that
> contains the link.
>
> Here's the code for the tabs:
>
> <ul id="content">
> <li class="inactive"><a href="#" id="btn_one">First Tab</a></li>
> <li class="active"><a href="#"id="btn_two">Second Tab</a></li>
> <li class="inactive"><a href="#" id="btn_three">Third Tab</a></li>
> </ul>
>
> Here's the jQuery.
>
> $(document).ready(function()
> {
> $('a#btn_one').click(function() {
> // make the li class where this link is, "active"
>
> return false;
> });
>
> });
>
> Basically, when clicking on "btn_xname", the class for the <li>
> element should change to "active" and make the rest, "inactive".
>
> I had some code, but it wasn't working. Truth is I'm not really sure
> what I was doing. If anyone can point me in the right direction, or
> give me some useful samples it would be great. And if anyone wants to
> help me code it or code the entire thing, I would be eternally
> grateful, to the point where I would put your
> name/email/website/whatever in the code to credit you.
>
> Thanks. :)
>
> -Yaz
