That's useful.

That's damn useful - thanks Jonathan! *adds to bookmarks*

I've always wondered: what's the purpose of the (function($){}(jQuery)) syntax?

Also, your comment form appears to be broken: http://img.skitch.com/20081106-et1bbbhufbwwstw9w5jsx5afpi.jpg

what about some "return false" action so we don't have to see the "#" in the URL?

I have some suggestions for improvements, here's my modified version of your script:

(function($){
   $.fn.switcheroo = function(els){
      return this.each(function(){
         var p = $(this);
         p.children(els||"li").click(function(){
            p.children().removeClass('active');
            $(this).addClass('active');
         });
      });
   }
}(jQuery));

I return the original result set to not break chaining, and also only bind the event on direct descendants to avoid unexpected behaviors with nested items.

Great piece of code.

Isn't this want .toggleClass() is for?

You could also use this:

jQuery('a').click(function() {
    $(this).addClass('active').parent().siblings().find('a').removeClass('active');
})

@Jonathan: Yes, I understand your point about not using children(). How about this:

(function($){
   $.fn.switcheroo = function(selector){
      selector = selector || "li";
      return this.each(function(){
         var elements = $(this).find(selector+":first").siblings(selector);
         elements.click(function(){
            elements.removeClass('active');
            $(this).addClass('active');
         });
      });
   }
}(jQuery));

I typically use a slightly different technique. Realizing that I may have more than one set of tabs on a page, I will contain a set of "a" or "li" tags within a "div" or "ul", and then parse only through that set (instead of going across the entire page).

$('.tab').click(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
});

And yes, each section would remember its active state.

@sho'fr

Here's the proper jQuery way to prevent the click event from finishing and showing a pound sign (changes from original in bold):

(function($){
   $.fn.switcheroo = function(els){
      this.each(function(){
         var p = $(this);
         $(els||'li', p).click(function(e){
            $('.active', p).removeClass('active');
            $(this).addClass('active');
            e.preventDefault();
         });
      });
   }
}(jQuery));

The "e" passed into the anonymous click function will be the click event object, to which jQuery conveniently appends the preventDefault() method. This added method standardizes event cancellation across browsers so you can avoid multiple if/else statements and effectively makes your code behave like the user didn't do anything.

For more information about jQuery's event system and normalization:
jQuery Documentation: Events Guide

Michael Thompson, I've noticed that "return false;" also prevents showing a # sign / jumping to a URL as a browser would expect. So for example:

$('.tab').click(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    return false;
});

Would this not also be correct?

@Michael Thompson eh... nevermind. Reread your post for the 5th and I finally got what you were saying. :)

Seems like a very smart and easy to use solution! Thanks for sharing!

why "p" ?

Why not cache the last active element? Or is that too obvious?

I'm no jQuery-guy so I'll just post the lines you'd need. Not sure you'd need the parent at all then. I hope it makes sense ;)

      var active; // define variable to contain last active element in a parent scope
...
            if (active) active.removeClass('active'); // remove class from last active element
            active = $(this).addClass('active');

I'd like to pass the class name also. So I can use any name, instead of .active.

(function($){
$.fn.switcheroo = function(els, activedClass){
if(!activedClass) {
activedClass= ".active"; //it's now a suggestion, not a fixed one
} else { //concatenate a dot
activedClass= "."+activedClass;
};
this.each(function(){
var p = $(this);
$(els||'li', p).click(function(e){
$(activedClass, p).removeClass(activedClass);
$(this).addClass(activedClass);
e.preventDefault();
});
});
}
}(jQuery));

Is it actually necessary to concatenate the "." into the className above?
I thought the addClass function would take care of that.

TEST1

Hey Jonathan,

I'm looking to really go further with JQuery and wondering how you learnt so much - was there a specific resource you used, such as a website/book etc?

Thanks!

Jack F