CLASS my Body For Greater CSS Control with Jquery

Question

I'm trying to give my BODY the same class as my navigation. the problem is .match(/tab[0-9]/) as the class name are (one, two, three). could u help me to replace the .match with something else?

html

<ul id="menu">
    <li><a href="#one" class="one">one</a></li>
    <li><a href="#two" class="two">two</a></li>
    <li><a href="#three" class="three">three</a></li>
</ul>

jquery

 $('#menu li a').click(function(){
     $("a").removeClass("active");
     $(this).addClass("active");

$('body').removeClass("one two three").addClass("" + $(".active").attr("class").match(/tab[0-9]/));

$("#bodyClass").text($('body').prop("class"));
});


$('body').removeClass("one two three").addClass("" + $(".active").attr("class").match(/tab[0-9]/));
$("#bodyClass").text($('body').prop("class"));

http://jsfiddle.net/J3qWx/10/

Answer 1

Like this too:

http://jsfiddle.net/J3qWx/12/

 $('#menu li a').click(function () {
     if ($(this).is('.active')) return;
     $('body').removeClass().addClass(this.className);
     $(this).closest('ul').find('.active').removeClass('active').end().addClass('active');
     $('#bodyClass').text($('body').attr('class'));
 });

Answer 2

(I may have misread your question, im not sure why you are doing the match ??)

Try this :

$('#menu li a').click(function(){
     $("a").removeClass("active");
     $('body').removeClass("work myself fiddles").addClass($(this).prop('class'));
     $(this).addClass("active");
     $("#bodyClass").text($('body').prop("class"));
});

Its just removing the classes from body and then adding the currently clicked class to body

Working example