Question

我正在为我朋友的照相馆工作一个单页网站：http://dev.manifold.ws/yorckstudio/ 该网站分为六个部分，每个部分都是视口的大小。当您单击其中一个菜单项时，它会转到相应的部分。我无法弄清楚的是在查看相应部分时如何让菜单项下划线。因此，如果我正在查看“照片”部分，我的固定菜单中的“照片”项将加下划线。

我的猜测是必须有一个相对简单的方法来实现这一点与一些javascript / jQuery魔术。但我的技能很差，我不知道从哪里开始。

有没有人知道如何实现这一目标？

干杯，

汤姆

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/

它可以被清理一下，但这是它的主旨。

您需要做的就是更新菜单和您的scrollto元素，只需添加一个匹配值的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;
        }
    });
});

使用固定菜单在单页网站中定位当前菜单项

3 个答案: