1

LI 要素から構成されるさまざまな div とメニューバーがあります。

<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 の 1 つ (またはそれ以上) がビューポートにある場合、この DIV にリンクする li 要素の下枠の色を変更したいと考えています。

例: DIV #second がビューポートにある場合、3 番目の 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 に答える