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

手动应用该类可以获得我想要的效果，但我的以下 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 函数提供的类名称前加上一个“.”

修改后的代码如下。

注意，当在 jquery 中做一个 id 选择器时，不要在它前面加上 tagName，因为这会减慢选择器的速度。

var profile = {

    ready: function() {

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

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