jQuery ScrollTo活动按钮

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

为click添加Css类像这样:-

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

Answer 3

首先，你需要添加相同的样式点击元素，你使用:hover。

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

Answer 4

我已经设法让onclick事件工作!!

现在建立在菜单项与窗口突出显示的想法上。滚动功能。

我已经设法有一个警报显示，当我通过一个div。但是我将如何通过多个div来影响样式时编码它?

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