jQuery addclass和toggle类没有设置我的类

时间:2013-02-19 07:15:54

标签: jquery css

美好的一天

由于某种原因,浏览器忽略了我的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')

有效。为什么不使用addClasstoggleclass命令分配我的类?我的CSS中没有拼错错误。

1 个答案:

答案 0 :(得分:1)

改为传递两个类i think you didn't referenced a jQuery library或者可能缺少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>