jQuery addclass 和切换类不设置我的类

Question

美好的一天

出于某种原因，浏览器忽略了我的 addClass 和 toggleClass jquery 调用:

HTML

<div id="menuNav" class="row-fluid">
    <div id="menuNavSub" class="span12">
        <ul>                         
            <li id="homeNav"><a href="index.aspx"><img src="images/homeNav2.png" /></a></li>
            <li id="galleryNav"><a href="galleries.aspx" class="block"><img src="images/homeNav2.png" /></a></li>
            <li id="aboutNav"><a href="about.aspx"><img src="images/homeNav2.png" /></a></li>               
            <li id="contactNav"><a href="contact.aspx"><img src="images/homeNav2.png" /></a></li>
        </ul>              
    </div>         
</div>

CSS:

.activeNavHome1 {
    background-position: -200px center;
}

.activeNavHome2{
    background: url('/images/homeNavSmall.png') no-repeat left center;
    background-position: -150px center;
}

jQuery:

    $('#homeNav').addClass('activeNavHome1');

    if ($(window).width() < 1080) {
       $('#homeNav').toggleClass('activeNavHome2');
     }

注意:我正在使用 ASP.NET 并且 jQuery 代码包含在我的 index.aspx 文件中。 HTML 包含在我的主文件中。

但是，当我使用

$('#homeNav').css('background-position', '-200px center')

它有效。为什么不使用 addClass 和 toggleclass 命令分配我的类？我的 CSS 没有拼写错误。

Answer 1

改为传递两个类，我认为您没有引用 jQuery 库，或者可能是您的doc ready 丢失了:

<script>
  $(function(){ // <-----------------------------you are missing this
     $('#homeNav').addClass('activeNavHome1');
     if ($(window).width() < 1080) {
       $('#homeNav').toggleClass('activeNavHome1 activeNavHome2');
     }
   });
 </script>

注意事项:

确保在执行此脚本之前已加载 jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>