更改頁面滾動上的活動菜單項？

Question

我想在啓動它的相應部分時激活菜單項。我從以前的SO問題得到啓發：Change Active Menu Item on Page Scroll?。

但不同的是，在我的菜單中，我在每個菜單項上都有一個小圖像，只有當我將鼠標懸停在菜單項上時纔會顯示，而在不顯示時隱藏。

HTML

<nav> 
     <ul id="pics"> 
      <a href="#def"><li id="text-what"><img src="images/what.png" id="pic-what" class="vishid"><p>item1</p></li></a> 
      <a href="#program"><li id="text-training"><img src="images/training.png" id="pic-training" class="vishid"><p>item2</p></li></a> 
      <a href="#testi"><li id="text-testi"><img src="images/trait.png" id="pic-testi" class="vishid"><p>item3</p></li></a> 
      <a href="#contact"><li id="text-contact"><img src="images/contact.gif" id="pic-contact" class="vishid"><p>item4</p></li></a> 
     </ul> 
    </nav> 

CSS

.vishid{ 
    visibility: hidden; 
} 

.visvis{ 
    visibility:visible; 
} 

JAVASCRIPT（顯示和隱藏圖像徘徊項目時）

$(document).ready(function(){ 
$("#text-what").hover(function(){ 
    $("#pic-what").addClass('visvis'); 
},function(){ 
    $("#pic-what").removeClass('visvis'); 
}); 

$("#text-training").hover(function(){ 
    $("#pic-training").addClass('visvis'); 
},function(){ 
    $("#pic-training").removeClass('visvis'); 
}); 

$("#text-testi").hover(function(){ 
    $("#pic-testi").addClass('visvis'); 
},function(){ 
    $("#pic-testi").removeClass('visvis'); 
}); 

$("#text-contact").hover(function(){ 
    $("#pic-contact").addClass('visvis'); 
},function(){ 
    $("#pic-contact").removeClass('visvis'); 
}); 
}); 

我要顯示的圖像時，我在它的相應的部分。我怎麼用javascript做到這一點？

Answer 1

這裏有很多事情要做。您的HTML應該在技術上得到糾正。 href的不應該封裝LI的。相反，你的href應該設置爲塊 - 寬度和高度100％ - 在LI內。我們還將.vishid的類別移至父級LI。這樣，如果你希望它在未來能夠影響其他任何東西 - 除了圖像之外，它將很容易添加。因此，這將是這樣的：

<nav> 
    <ul id="pics"> 
     <li id="text-what" class="vishid"><a href="#def"><img src="images/what.png" id="pic-what"><p>item1</p><</a>/li> 
     <li id="text-training" class="vishid"><a href="#program"><img src="images/training.png" id="pic-training"><p>item2</p></a></li> 
     <li id="text-testi" class="vishid"><a href="#testi"><img src="images/trait.png" id="pic-testi"><p>item3</p></a></li> 
     <li id="text-contact" class="vishid"><a href="#contact"><img src="images/contact.gif" id="pic-contact"><p>item4</p></a></li>< 
    </ul> 
</nav> 

然後，你需要調整你的CSS來糾正「非塊」級HREF。

#pics li a { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

.vishid img { 
    visibility: hidden; 
} 

.visvis img { 
    visibility: visible; 
} 

最後，我將假設您在HTML中使用「文章」作爲章節。不一定是，但這就是我的例子所假設的。

var clickScroll = false, 
    triggerHighlight = 80; // distance from the top to trigger action 

$(window).scroll(function() { 

    var y = $(this).scrollTop(), 
     yCatch = y + triggerHighlight; 

    // Let's wrap in a variable check. Set this to tru is clicking on navigation 
    // false if simply scrolling 
    if (!clickScroll) { 
     $('article').each(function (i) { 
      var whichArticle = $(this).attr('id'); 

      if ($(this).position().top < yCatch) { 
       var currentArticle = "#" + whichArticle; 
       adjustSubNav(currentArticle); 
      } 
     }); 
    } 

}); 

function adjustSubNav(l) { 
    $('#pics a').each(function (i) { 
     if ($(this).attr('href') == l) { // Add active class to the corresponding menu item 
      $(this).parent('li').removeClass('vishid').addClass('visvis'); 
     } else { 
      $(this).parent('li').removeClass('visvis').addClass('vishid'); 
     } 
    }); 
}