在具有固定菜单的单页网站中定位当前菜单项

Question

我正在为我朋友的照相馆创建一个单页网站：http://dev.manifold.ws/yorckstudio/场地分为六个部分，每个部分的大小与视口相同。当您单击其中一个菜单项时，它会将您带到相应的部分。我不明白的是，在查看相应的部分时，如何使菜单项下划线。因此，如果我正在查看"照片"部分，我的固定菜单中的"照片"项目将加下划线。

我的猜测是，一定有一种相对简单的方法可以通过javascript/jQuery魔术来实现这一点。但是我的js技术很差，我不知道从哪里开始。

有人知道如何做到这一点吗？

干杯，

Thom

Answer 1

使用jQuery，添加这是您的JS:

$('#menu a').click(function(){
  $(this).css('text-decoration','underline');
  $(this).parent().siblings().find('a').css('text-decoration','none');
})

这将为单击的锚标记添加下划线，并删除所有其他锚标记上的属性。

jsFiddle：http://jsfiddle.net/z97RX/

Answer 2

试试这个：

$('#menu ul li a').click(function(){
    var that = $(this);
    that.addClass('underline');
    that.parent().siblings().find('a').removeClass('underline');
});

并添加到css

.underline{
    text-decoration: underline;
}

Answer 3

如果可以，请看这里http://jsfiddle.net/xv8tf/3/

它可以稍微清理一下，但这是最糟糕的。

你所需要做的就是更新菜单和滚动到元素，只需添加一个具有匹配值的rel标签

示例：

<div id="menu">
    <ul>
        <li><a rel="photos" href="javascript:void(0)">Photos</a></li>
    </ul>
</div>
<div rel="photos" id="photos"></div>

//create a list of all elements to be tested against
var scrollMatches = [
    $('#photos'),
    $('#studio'),
    $('#rates'),
    $('#features'),
    $('#plan'),
    $('#contact')
];
$(window)
.on('scroll', function(){
    //save scrolltop to var to prevent multiple callings
    var scroll = $(this).scrollTop();
    //iterate through each of the elements to be testing against
    $.each(scrollMatches, function(k, v){
        var offset = v.offset()
        // if the element is in the viewport
        if(offset.top  <= scroll && (offset.top + v.outerHeight()) > scroll){
            // get associated element
            var element = $('#menu li > a[rel='+v.attr('rel')+']');
            // do whatever you want to the current tested element
            element.css('text-decoration','underline');
            // dp whatever you want to the associated menu item
            element.parent().siblings().find('a').css('text-decoration','none');
            return false;
        }
    });
});