1

我的网站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>

}

4

4 回答 4

1

在链接的 onclick 事件上添加一些 CSS 类

于 2013-04-02T11:47:47.477 回答
0

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

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

于 2013-04-02T11:47:01.753 回答
0

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

$(document).ready(function(){
    $('nav ul li a').click(function(){
    $('nav ul li a').removeClass();
    $(this).addClass('active');
    return false;
   });
});
于 2013-04-02T11:48:40.637 回答
0

我已经设法让 onclick 事件正常工作！！！

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

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

$(function(){
  $(window).scroll(function(){
    var aPortfolio = $('.portfoliowrapper').height();
    if($(this).scrollTop()>=aPortfolio){
        alert('portfolio just passed.');
    }
  });
});
于 2013-04-08T00:27:08.457 回答