jQuery preventDefault 액션은 작동하지만 나머지 스크립트는 작동하지 않는 것 같습니다.

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);} 

나에게 원하는 효과를 얻을 수 있지만 내 다음 자바 스크립트는

var profile = { 
    ready: function() { 

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

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

에서 preventDefault 라인이 작동 것으로 보인다 작동하지 않습니다,하지만 클래스는 추가되지 않습니다. 이 자바 스크립트를 실행하기 위해 무엇인가 놓치고 있습니까? 내가 어떤 도움을 크게 감상 할 수

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

jQuery를 등처럼 내에서 .aspx 콘텐츠 페이지의 내용을 머리에 연결이 파일을 ...이, 난 정말 각 탭에 대한 별도의 페이지를 갖고 싶어하지 않습니다.

Answer 1

두 가지 문제가있었습니다. 당신이 사용하는

1. 은 JQuery와 같은 이벤트 객체에 전달
2. 당신은 함께 addClass 기능에 주어진 클래스 이름 앞에 '를.'

아래 수정 된 코드입니다.

N.B jquery에서 id selector를 사용하는 경우 tagName 접두사를 사용하지 마십시오. 그러면 selector가 다운됩니다.

var profile = { 

    ready: function() { 

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

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