L'action jQuery preventDefault fonctionne, mais le reste de mon script ne semble pas fonctionner

Question

J'ai trois onglets, constitués d'images qui changent lorsque vous les survolez. L'effet de renversement est obtenu avec l'exemple suivant 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);} 

L'application de la classe me obtient manuellement l'effet désiré, mais mon script java suivant ne fonctionne pas

var profile = { 
    ready: function() { 

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

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

La ligne preventDefault semble fonctionner, mais la classe n'est pas ajouté. Est-ce que je manque quelque chose pour exécuter ce javascript? Je jQuery et ce fichier lié dans la tête de contenu de ma page de contenu .aspx comme si ...

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

Toute aide serait grandement appréciée, je ne veux vraiment pas avoir séparés des pages pour chaque onglet.

Answer 1

Vous avez rencontré deux problèmes.

1. Vous utilisez le passé dans l'objet de l'événement comme jquery
2. Vous préfixer le nom de la classe donnée à la fonction addClass avec un « »

Code révisé ci-dessous. N.B Aussi, lorsque vous faites un sélecteur d'identifiant dans jquery, ne le préfixez pas avec le tagName car cela ralentit le sélecteur.

var profile = { 

    ready: function() { 

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

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