Question

我的网站http://www.iancockram.com是一个单页组合。我试图解决的问题是我想要激活的菜单按钮突出显示。

我已尝试配置它，但永远不能让它正常工作..

    **JQUERY**
    //scrollTo
    $(document).ready(function(){
    $('nav ul li a').click(function(){
    var el = $(this).attr('href');
    var elWrapped = $(el);
    scrollToDiv(elWrapped, 86);
    return false;
    });

    function scrollToDiv(element,navheight){
    var offset = element.offset();
    var offsetTop = offset.top;
    var totalScroll = offsetTop-navheight;
    $('body,html').animate({
            scrollTop: totalScroll
    }, 500);
    }
    });//scrollTo end


    **HTML**
    <nav>
    <ul id="top-menu">
      <div id="logo"><img src="furniture/logo.png" width="242" height="90" alt="iancockram.com" title="iancockram.com"></div>
      <li class="button"> <span class="menutext"><a href="#contact">Contact</a></span></li>
      <li class="button"> <span class="menutext"><a href="#extra">Extra</a></span></li>
      <li class="button"> <span class="menutext"><a href="#portfolio">Portfolio</a></span></li>
      <li class="button"> <span class="menutext"><a href="#about">About</a></span></li>
    </ul>

}

Answer 1

在链接

的onclick事件上添加一些css类

Answer 2

首先，您需要为单击的元素添加相同的样式，用于：hover。

如果你想在滚动时高亮显示菜单项，你需要设置$（window）.scroll（）事件，检查高度是否在其中一个div的顶部和底部之间，并且应用相同的样式之前。

Answer 3

添加Css类以单击像这样： -

$(document).ready(function(){
    $('nav ul li a').click(function(){
    $('nav ul li a').removeClass();
    $(this).addClass('active');
    return false;
   });
});

Answer 4

我设法让onclick活动正常工作!!!

现在建立在使用window.scroll函数突出显示菜单项的想法上。

当我通过div时，我设法有一个警报节目。但是，在传递多个div以影响样式时，我将如何对其进行编码？

$(function(){
  $(window).scroll(function(){
    var aPortfolio = $('.portfoliowrapper').height();
    if($(this).scrollTop()>=aPortfolio){
        alert('portfolio just passed.');
    }
  });
});

jQuery ScrollTo活动按钮

4 个答案: