1

我有不同的 div 和一个由 LI 元素组成的菜单栏。

<ul>
    <li><a href="#first" id="nav1" title="Next Section">FIRST</a></li>
    <li><a href="#second" id="nav2" title="Next Section">SECOND</a></li>
    <li><a href="#third" id="nav3" title="Next Section">THIRD</a></li>
    <li><a href="#fourth" id="nav4" title="Next Section">FOURTH</a></li>
</ul>

div 的名称是#first 到#fourth。

如果其中一个 DIV（或更多）在视口中，我想更改链接到此 DIV 的 li 元素的底部边框的颜色。

例如：如果 DIV #third 在视口中，则第三个 LI 元素 (#nav3) 应将其底部边框更改为绿色。如果它离开视口，它应该再次变为白色。

  • 仅当 DIV 在视口中时。一旦它离开视口，我想撤消颜色变化。

我用 jQuery Viewport 试过：http: //www.appelsiini.net/projects/viewport

我的问题是我不知道如何使用这个选择器——我知道这是基本的东西，但我真的不知道。

$("#third:in-viewport").each(function() {
    $("#nav1, #nav2, #nav4").animate({ borderBottomColor: '#fff' },800);
    $("#nav3").animate({ borderBottomColor: 'green' },800);
});

如果有人可以帮助我，那就太棒了。非常感谢！

4

1 回答 1

0

我会为您的 DIV 添加一个类，例如：

<div id="first" class="item"> // Your code <div>
<div id="second" class="item"> // Your code <div>
<div id="third" class="item"> // Your code <div>
<div id="fourth" class="item"> // Your code <div>

然后在 jQuery 中使用类似的东西来突出显示链接：

$(".item:in-viewport").each(function() {
     var item_id = $(this).attr("id");
     // In viewport
     $("a[href=#" + item_id +"]").animate({ borderBottomColor: 'green' },800);     
     // Not in viewport
     $("a").not("a[href=#" + item_id +"]").animate({ borderBottomColor: '#fff' },800);
});
于 2013-11-11T10:20:01.977 回答