jQuery preventDefault action works, but the rest of my script doesn't appear to be working.

Question

I have three tabs, made up of images that change when you rollover them. The rollover effect is achieved with the following example css.

a#tabButton_profile
{
    height: 30px;
    width: 133px;
    display:block;
    background-image: url(img/content_tab_profile.jpg);

}
a#tabButton_profile:hover{background-image: url(img/content_tab_profile_rollover.jpg);}
a#tabButton_profile.profileActive{background-image: Url(img/content_tab_profile_rollover.jpg);}

Applying the class manually gets me the desired effect, but my following java script isn't working

var profile = {
    ready: function() {

        $('a#tabButton_profile').click(
            function($e) {
                $e.preventDefault();
                $e('a#tabButton_profile').addClass('.profileActive');
            });
    }
};

$(document).ready(profile.ready);

The preventDefault line appears to be working, but the class isn't being added. Am I missing anything to execute this javascript? I have jQuery and this file linked in the content head of my .aspx content page like so...

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link type="text/css" href="css/Default.css" rel="Stylesheet" />
    <link type="text/css" href="css/Profile.css" rel="Stylesheet" />
   <script type='text/javascript' src="lib/jQuery.js"></script>
    <script type='text/javascript' src="js/profile.js"></script>
</asp:Content>

Any help would be greatly appreciated, I really don't want to have seperate pages for each tab.

Answer 1

You had two issues.

1. You are using the passed in event object as jquery
2. You prefix the class name given to the addClass function with a '.'

Revised code below.

N.B Also when doing an id selector in jquery do not prefix it with the tagName as this slows the selector down.

var profile = {

    ready: function() {

        var $tabBtn = $('#tabButton_profile').click(
            function(event) {
                event.preventDefault();
                $tabBtn.addClass('profileActive');
            });
        }
};

$(document).ready(profile.ready);