Javascript 要使当前的<；李>；积极的_Javascript_Html_Css_Twitter Bootstrap

Javascript 要使当前的<；李>；积极的

javascript html css twitter-bootstrap

Javascript 要使当前的<；李>；积极的,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我正在创建视差网页我想做一件事 <li class="active"> 我正在使用Js进行平滑滚动 $(".scroll").click(function(event){ event.preventDefault(); //calculate destination place var dest=0; if($(this.hash).offset().top > $(document).height()-$(window).heig

我正在创建视差网页

我想做一件事

<li class="active">

我正在使用Js进行平滑滚动

 $(".scroll").click(function(event){
     event.preventDefault();
     //calculate destination place
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     //go to destination
     $('html,body').animate({scrollTop:dest}, 1500,'swing');
 });

在单击函数中添加以下两行

$(".scroll").parent().toggleClass("active", false);
$(this).parent().toggleClass("active", true);

第一行从所有

li

元素中删除类

active

。第二个将

active

添加回单击的

元素的父元素=li。

在页面中添加以下脚本
$（'document'）.ready（函数（）{
$（'.liactive'）。单击（函数（）{
$（'.liactive'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});

您可以在每个li标记中添加class和id，如下所示。

这就是解决方案

HTML

尝试此操作。是否要执行

$（'.nav>li'）

并检查单击是否源自锚元素？

 $(".scroll").click(function(event){
     event.preventDefault();
     //calculate destination place
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     //go to destination
     $('html,body').animate({scrollTop:dest}, 1500,'swing');
 });

$('.nav').click(function(){
    $('.nav').removeClass('active');
    $(this).addClass('active');
});

$(".scroll").parent().toggleClass("active", false);
$(this).parent().toggleClass("active", true);

<body data-spy="scroll" data-target="#navbar-example">
<div id="navbar-example">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand"href="#home">DANIEL <span class="brand">THE DEVELOPER</span></a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-navi">
          <li class="active"><a href="#home" class="scroll">Home</a></li>
          <li><a href="#about" class="scroll">About</a></li>
          <li><a href="#" class="scroll">Works</a></li>
          <li><a href="#" class="scroll">Services</a></li>
          <li><a href="#" class="scroll">Stats</a></li>
          <li><a href="#" class="scroll">Team</a></li>
          <li><a href="#" class="scroll">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

 body{
  position: relative;
 }

 $('body').scrollspy({ target: '#navbar-example' })
 $('[data-spy="scroll"]').each(function () {
   var $spy = $(this).scrollspy('refresh')
 })