Return to Question

I've written a small function which displays a div related to an anchor element using data attributes.

The data attribute is used to match the class of the relevant div which is then displayed whilst the others are hidden.

All very basic, however I'm wondering if there is anyway to improve it? Is there a better solution than using the data attribute? Any best practices?

$(".tabs li a").click(function() {
 var cssClass = "." + $(this).data("class");
 // Add active class to current tab, remove from siblings
 $(this).addClass("active").parent().siblings().find("a").removeClass("active");
 // Find the associated content and show it, hide its siblings
 $(".tabs-content").find(cssClass).show().siblings().hide();
 return false;
});

jsfiddle example here

###Edit

This ended up being re-written for production using classes instead of data attributes, like so:

$(".tabs li a").click(function() {
 var cssClass = "." + $(this).attr("class");
 
 $('.tabs a.active').removeClass("active"); // Find the previously active tab and remove it
 $(this).addClass("active"); // Add active class to current tab
 $(".tabs-content").find('> div').hide(); // Hide the all tab divs
 $(".tabs-content").find(cssClass).show() // Find the associated div and display it
 
 return false;
});​

Updated jsfiddle

I've written a small function which displays a div related to an anchor element using data attributes.

The data attribute is used to match the class of the relevant div which is then displayed whilst the others are hidden.

All very basic, however I'm wondering if there is anyway to improve it? Is there a better solution than using the data attribute? Any best practices?

$(".tabs li a").click(function() {
 var cssClass = "." + $(this).data("class");
 // Add active class to current tab, remove from siblings
 $(this).addClass("active").parent().siblings().find("a").removeClass("active");
 // Find the associated content and show it, hide its siblings
 $(".tabs-content").find(cssClass).show().siblings().hide();
 return false;
});

jsfiddle example here

Edit

This ended up being re-written for production using classes instead of data attributes, like so:

$(".tabs li a").click(function() {
 var cssClass = "." + $(this).attr("class");
 
 $('.tabs a.active').removeClass("active"); // Find the previously active tab and remove it
 $(this).addClass("active"); // Add active class to current tab
 $(".tabs-content").find('> div').hide(); // Hide the all tab divs
 $(".tabs-content").find(cssClass).show() // Find the associated div and display it
 
 return false;
});​

Updated jsfiddle

I've written a small function which displays a div related to an anchor element using data attributes.

The data attribute is used to match the class of the relevant div which is then displayed whilst the others are hidden.

All very basic, however I'm wondering if there is anyway to improve it? Is there a better solution than using the data attribute? Any best practices?

$(".tabs li a").click(function() {
 var cssClass = "." + $(this).data("class");
 // Add active class to current tab, remove from siblings
 $(this).addClass("active").parent().siblings().find("a").removeClass("active");
 // Find the associated content and show it, hide its siblings
 $(".tabs-content").find(cssClass).show().siblings().hide();
 return false;
});

jsfiddle example here

I've written a small function which displays a div related to an anchor element using data attributes.

The data attribute is used to match the class of the relevant div which is then displayed whilst the others are hidden.

All very basic, however I'm wondering if there is anyway to improve it? Is there a better solution than using the data attribute? Any best practices?

$(".tabs li a").click(function() {
 var cssClass = "." + $(this).data("class");
 // Add active class to current tab, remove from siblings
 $(this).addClass("active").parent().siblings().find("a").removeClass("active");
 // Find the associated content and show it, hide its siblings
 $(".tabs-content").find(cssClass).show().siblings().hide();
 return false;
});

jsfiddle example here

###Edit

This ended up being re-written for production using classes instead of data attributes, like so:

$(".tabs li a").click(function() {
 var cssClass = "." + $(this).attr("class");
 
 $('.tabs a.active').removeClass("active"); // Find the previously active tab and remove it
 $(this).addClass("active"); // Add active class to current tab
 $(".tabs-content").find('> div').hide(); // Hide the all tab divs
 $(".tabs-content").find(cssClass).show() // Find the associated div and display it
 
 return false;
});​

Updated jsfiddle

I've written a small function which displays a div related to an anchor element using data attributes.

The data attribute is used to match the class of the relevant div which is then displayed whilst the others are hidden.

All very basic, however I'm wondering if there is anyway to improve it? Is there a better solution than using the data attribute? Any best practices?

jsfiddle example here

I've written a small function which displays a div related to an anchor element using data attributes.

The data attribute is used to match the class of the relevant div which is then displayed whilst the others are hidden.

All very basic, however I'm wondering if there is anyway to improve it? Is there a better solution than using the data attribute? Any best practices?

$(".tabs li a").click(function() {
 var cssClass = "." + $(this).data("class");
 // Add active class to current tab, remove from siblings
 $(this).addClass("active").parent().siblings().find("a").removeClass("active");
 // Find the associated content and show it, hide its siblings
 $(".tabs-content").find(cssClass).show().siblings().hide();
 return false;
});

jsfiddle example here