有人可以指出这个jquery或css出了什么问题吗?

我从几年前的帖子中提取了这个jQuery代码段,但我一直无法根据自己的需要对其进行调整,只是根据视图中的div以某种方式突出显示了左侧导航栏中的文本,这很可能确实是愚蠢的错误,但我只想获得一些帮助即可得到答案。不好意思,我很新!

的HTML:

    <div class="navwrap">
    <nav>
     <ul>
        <li><a href="#two" class="links">PotD </a></li>
        <li><a href="#three" class="links">Description </a></li>
        <li><a href="#four" class="links">Extra </a></li>
      </ul>
    </nav>
  </div>


  <div class="container" id="two">

        <div class="container-2-content" id="PotD">
          <h2> Aquilegia vulgaris </h2>
          <h3> "common columbine" </h3>
        </div>
  </div>

<div class="container" id="three">

    <div class="container-3-content"  id="Description">
      <h2> Description </h2>
    </div>
</div>

<div class="container" id="four" >

    <div class="container-4-content"  id="Extra">
      <h2> Extra </h2>
    </div>
</div>

CSS:

li a:hover, li.a.active{

  cursor:pointer;
  font-size:30px;
  font-weight: 600;
  color: rgb(255, 253, 234);
  border-top: 3px solid rgb(255, 253, 234);
  border-bottom: 3px solid rgb(255, 253, 234);

}

jQuery的:

 $(document).ready(function(){

  var $sections = $('.container');


  $(window).scroll(function(){


    var currentScroll = $(this).scrollTop();


    var $currentSection


    $sections.each(function(){

      var divPosition = $(this).offset().top;


      if( divPosition - 1 < currentScroll ){

        $currentSection = $(this);


      }


      var id = $currentSection.attr('id');
     $('').removeClass('active');
     $("[href=#"+id+"]").addClass('active');

    })

  });
});
评论
  • 鸡蛋
    鸡蛋 回复

    It's possible you are looking for something called ScrollSpy. The bootstrap framework has it ready to go.