然而,使用航点库,问题似乎与脚本无关,我们对一般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/
我做错了什么?
答案 0 :(得分:2)
没看到你发布的html,请使用:
$('a[href="#' + this.id + '"]').toggleClass("marca-menu", direction === 'down');