jQuery preventDefault action работает, но остальная часть моего скрипта не работает

Question

У меня есть три вкладки, состоящие из изображений, которые меняются при их опрокидывании. Эффект опрокидывания достигается в следующем примере 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);} 

Применяя класс вручную получает мне желаемый эффект, но мой следующий Java-скрипт не работает

var profile = { 
    ready: function() { 

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

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

preventDefault линия, кажется, работает, но не добавляется класс. Я что-то пропустил для выполнения этого javascript? У меня есть JQuery и этот файл, связанный в голову содержимого моего .aspx содержимого страницы, как так ...

<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> 

Любая помощь будет оценена, я действительно не хочу, чтобы иметь раздельные страницы для каждой вкладки.

Answer 1

У вас было две проблемы.

1. Вы используете переданный в объекте события, как JQuery
2. Вы предварить имя класса, данное функцию addClass с «»

Пересмотренный код ниже.

N.B Также при выполнении селектора id в jquery не префикс его с именем tagName, так как это замедляет селектор вниз.

var profile = { 

    ready: function() { 

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

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