Mediascend's Weblog – Musings, ramblings and observations regarding video on the web

jQuery .removeClass() and the Mysterious Extra Space

Friday, January 22nd, 2010

Recently I needed to execute a set of tabs based on an unordered list (ul). Being tabs, they’d need (at the minimum) an off and on state.

As I mentioned, the markup for this tabbed set would be an unordered list:

This post will mainly cover behavior. There are many great tutorials on how to style a tabbed system using the sliding doors technique. I suggest A List Apart’s excellent post: http://www.alistapart.com/articles/slidingdoors2/.

Anyhoo, the logic for this is fairly simple. On page load the first tab (li) would have a class of “current”. On click of any of the tabs, remove the class from all tabs, then apply class=”current” to the item being clicked (this).

So far so good. Now to prevent multiple clicks on the same tab, we’ll need to add a conditional statement (if) to only execute the logic if the tab being clicked is not the currently-selected tab.

So simply ensure that the currently-clicked tab’s class is NOT “current”. Easy, right?

Not so much. Being me and having my luck, it didn’t work right out of the box.

The issue stemmed from my use of jQuery .addClass() and .removeClass() to inject the “current” class onto and from the appropriate tabs. For reasons I don’t understand, .removeClass() does indeed remove the class, but it also leaves behind a space (class=” “).

So as you can imagine this unexpected behavior could be an if-statement-buster if you’re not careful, as I wasn’t.

The way around it is simply to use jQuery’s .attr() method and manually set and remove the class attribute value. ($(this.attr(“class”,”current”);). This way you know exactly what values are potentially injected and can prepare you conditional statements accordingly.

So, does anyone know why .removeClass() leaves a space?

1 Comment »