$(document).ready(function () {
    //Initialize 
    //Set the selector in the first tab
    $(".TabMenu a:first").addClass("selector");

    //Basic hover action
    $(".TabMenu a").mouseover(function () { $(this).addClass("hovering"); });
    $(".TabMenu a").mouseout(function () { $(this).removeClass("hovering"); });

    //Add click action to tab menu
    $(".TabMenu a").click(function () {
        //Remove the exist selector
        $(".selector").removeClass("selector");
        //Add the selector class to the sender
        $(this).addClass("selector");
        //Find the width of a tab
        var TabWidth = $(".TabContent:first").width();
        if (parseInt($(".TabContent:first").css("margin-left")) > 0) TabWidth += parseInt($(".TabContent:first").css("margin-left"));
        if (parseInt($(".TabContent:first").css("margin-right")) > 0) TabWidth += parseInt($(".TabContent:first").css("margin-right"));
        //But wait, how far we slide to? Let find out
        var newLeft = -1 * $(".TabMenu a").index(this) * TabWidth;
        //Ok, now slide
        $(".AllTabs").animate({ left: +newLeft + "px" }, 1000);
    });
});