toggleClass似乎不适用于此处。有什么线索的原因?

时间:2013-07-26 10:53:19

标签: jquery jquery-waypoints

然而,使用航点库,问题似乎与脚本无关,我们对一般jquery和javascript理解的理解不足。

使用这一行,我们跳跃选择ALL属性href作为特定值的锚点,并添加或删除一个类。

$('a[href="' + $(this).attr('id') + '"]').toggleClass("marca-menu", direction === 'down');

但没有任何反应。

代码,以及下面的小提琴。

JS:

 $(document).ready(function() {   
   $('#container section').each(function() {            
     $(this).waypoint(function(direction) {
       $('a[href="' + $(this).attr('id') + '"]').toggleClass("marca-menu", direction === 'down');
     });
   });
});

HTML:

<nav class="main-menu">
<ul>
 <li><a href="#slide3" target="_self">plimplim</a></li>
 <li><a href="#slide4" target="_self">plimplomm</a></li>
 <li><a href="#slide5" target="_self">plimplumm</a></li>
</ul>
</nav>

<section id="slide3">
  <h1>bababaadasda</h1>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
</section>
<section id="slide4">
 <h1>SLIDE 4</h1>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
</section>
<section id="slide5">
 <h1>SLIDE 5</h1>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
</section>

CSS:     nav {         显示:块;         位置:固定;         宽度:100%;         背景:红色;     }

.marca-menu {
    background-color: blue;
}

你可以在这里查看:

http://jsfiddle.net/talofo/Bkws7/

我做错了什么?

1 个答案:

答案 0 :(得分:2)

没看到你发布的html,请使用:

$('a[href="#' + this.id + '"]').toggleClass("marca-menu", direction === 'down');