當目標div在視圖中不工作時jQuery錨鏈接高亮顯示

Question

我正在關注這篇文章的頂部答案here。

直接鏈接到JSFiddle。

我試過實施相同的策略，除了一部分不工作，特別是最後一行。我的結構有點不同，所以我不得不改變它。

原文：

menuItems 
    .parent().removeClass("active") 
    .end().filter("[href='#"+id+"']").parent().addClass("active"); 

我必須擺脫母體的（），因爲我的設置是一個有點不同，但打破它。

menuItems 
    .removeClass("active") 
    .end().filter("[href='#"+id+"']").addClass("active"); 

一半的作品，如果我保持第一.parent()，它只是不刪除類，好像我也喜歡。所以我的問題是，我的版本的語法有什麼問題，不包括.parent()？

這裏是我的HTML結構：

<div class="content-wrap> 
    <a class="side-link>Menu item 1</a> 
    <a class="side-link>Menu item 2</a> 
    <a class="side-link>Menu item 3</a> 
</div> 

Answer 1

在你的jQuery當你正在尋找元素來突出你需要一步DOM一步了，所以你可以找到同級元素：

menuItems 
    .removeClass("active").parent() 
    .end().filter("[href='#"+id+"']").addClass("active"); 

工作示例：

// Cache selectors 
 
var lastId, 
 
    topMenu = $("#top-menu"), 
 
    topMenuHeight = topMenu.outerHeight()+15, 
 
    // All list items 
 
    menuItems = topMenu.find("a"), 
 
    // Anchors corresponding to menu items 
 
    scrollItems = menuItems.map(function(){ 
 
     var item = $($(this).attr("href")); 
 
     if (item.length) { return item; } 
 
    }); 
 

 
// Bind click handler to menu items 
 
// so we can get a fancy scroll animation 
 
menuItems.click(function(e){ 
 
    var href = $(this).attr("href"), 
 
     offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; 
 
    $('html, body').stop().animate({ 
 
     scrollTop: offsetTop 
 
    }, 300); 
 
    e.preventDefault(); 
 
}); 
 

 
// Bind to scroll 
 
$(window).scroll(function(){ 
 
    // Get container scroll position 
 
    var fromTop = $(this).scrollTop()+topMenuHeight; 
 
    
 
    // Get id of current scroll item 
 
    var cur = scrollItems.map(function(){ 
 
    if ($(this).offset().top < fromTop) 
 
     return this; 
 
    }); 
 
    
 
    // Get the id of the current element 
 
    cur = cur[cur.length-1]; 
 
    var id = cur && cur.length ? cur[0].id : ""; 
 
    
 
    if (lastId !== id) { 
 
     lastId = id; 
 
     // Set/remove active class 
 
     menuItems 
 
     .removeClass("active").parent() 
 
     .end().filter("[href='#"+id+"']").addClass("active"); 
 
    }     
 
});

body { 
 
    height: 6000px; 
 
    font-family: Helvetica, Arial; 
 
} 
 

 
#top-menu { 
 
    position: fixed; 
 
    z-index: 1; 
 
    background: white; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 

 
#top-menu a { 
 
    display: block; 
 
    padding: 5px 25px 7px 25px; 
 
    width: 6em; 
 
    text-align: center; 
 
    -webkit-transition: .5s all ease-out; 
 
    -moz-transition: .5s all ease-out; 
 
    transition: .5s all ease-out; 
 
    border-top: 3px solid white; 
 
    color: #aaa; 
 
    text-decoration: none; 
 
    float: left; 
 
} 
 

 
#top-menu a:hover { 
 
    color: #000; 
 
} 
 

 
#top-menu a.active { 
 
    border-top: 3px solid #333; 
 
    color: #333; 
 
} 
 

 
#foo { 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 

 
#bar { 
 
    position: absolute; 
 
    top: 800px; 
 
} 
 

 
#baz { 
 
    position: absolute; 
 
    top: 1200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content-wrap" id="top-menu"> 
 
    <a class="side-link active" href="#">Menu item 1</a> 
 
    <a class="side-link" href="#bar">Menu item 2</a> 
 
    <a class="side-link" href="#baz">Menu item 3</a> 
 
</div> 
 

 

 
<a id="foo">Foo</a> 
 

 

 
<a id="bar">Bar</a> 
 

 

 
<a id="baz">Baz</a>