第一屏的active被多次加载

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

*{
margin:0px;
padding:0px;
}
html body{
font-family:"微软雅黑";
color:#ffffff;
width:1902px;
margin:0 auto;

}

header{
width:100%;
z-index:2;
position:fixed;
top:0;
left:0;
}
.header-logo{
height:41px;
width:172px;
float:left;
text-indent:52px;
background:url(img/logo.png) left center no-repeat;
margin:10px 9px;
font-weight:bolder;
line-height:41px;

}
.header-nav{
float:right;
width:597px;
height:60px;
font-size:13px;
list-style:none;
}
.header-nav-li{
list-style:none;
float:left;
margin-right:37px;
line-height:60px;
}
.active{
width:58px;
height:42px;
border-bottom:3px solid #ff0000;
}
.button{
background-color:#f01400;
width:97px;
height:39px;
border-radius:3px;
padding-right:0px;
text-align:center;
line-height:40px;
margin-top:10px;

}
.section{
height:640px;
width:1902px;
z-index:1;
position:relative;
background-size:cover;
}
.section-1{
background:url(img/sc1.jpg) no-repeat;
background-size:100% 100%;
}
.clear{clear:both;}
.title{
position:absolute;
left:50%;
font-size:48px;
font-weight:bold;
}
.subtitle{
position:absolute;
left:50%;
font-size:16px;
font-weight:light;
}
.section-1-title{
top:235px;
width:384px;
margin-left:-192px;

}
.section-1-subtitle{
top:312px;
width:208px;
margin-left:-104px;

}
.section-2{
background-color:#f3f5f7;
color:#07111b;
}
.section-2-title{
top:84px;
width:479px;
margin-left:-239px;
}
.title-red{
width:49px;
height:3px;
background-color:#ff0000;
position:absolute;
left:50%;
top:168px;
margin-left:-24px;
}
.section-2-subtitle{
top:190px;
width:459px;
margin-left:-229px;
text-align:center;
}
.section-2-pic{
position:absolute;
left:50%;
bottom:0px;
}
.section-2-picone{
width:761px;
height:380px;
background:url(img/sc2.png) no-repeat;
margin-left:-380px;
}
.section-2-pictwo{
width:280px;
height:380px;
background:url(img/sc2-1.png) no-repeat;
margin-left:-140px;
}
.section-2-picthree{
width:268px;
height:268px;
background:url(img/sc2-2.png) no-repeat;
bottom:48px;
transform:rotate(-10deg);
}
.section-3{
background-color:#2b333b;
color:#fff;
}
.section-3-bg{
height:100%;

}
.section-3-title{
width:402px;
top:224px;
right:1013px;
font-size:35px;
}
.section-3-subtitle{
width:514px;
top:320px;
}
.section-3-red{
top:274px;
right:1013px;
margin-left:0px;}
.section-3-circle{
position:absolute;
top:525px;
right:390px;
left:auto;
}
.circle{
height:69px;
width:69px;
border-radius:50%;
margin-right:36px;
float:left;
text-align:center;
line-height:69px;

}
.section-3-circle-1{box-shadow:0 0 5px 0 #02a4ce inset;}
.section-3-circle-2{box-shadow:0 0 5px 0 #6b658f inset;}
.section-3-circle-3{box-shadow:0 0 5px 0 #dd413b inset;}
.section-3-circle-4{box-shadow:0 0 5px 0 #27bde5 inset;}
.section-3-circle-5{box-shadow:0 0 5px 0 #90bd4b inset;}
.section-4{
background-color:#f3f5f7;
color:#07111b;
}
.section-4-title{
width:466px;
margin-left:-233px;
top:90px;
}
.section-4-subtitle{
width:244px;
margin-left:-122px;
top:191px;
}
.section-4-pics{
width:1180px;
position:absolute;
top:286px;
left:50%;
margin-left:-602px;
}
.section-4-cell{
width:295px;
height:156px;
float:left;
position:relative;
}
.section-4-picone{
background:url(img/sc4-1.png) no-repeat;
}
.section-4-pictwo{
background:url(img/sc4-2.png) no-repeat;
}
.section-4-picthree{
background:url(img/sc4-3.png) no-repeat;
}
.section-4-picfour{
background:url(img/sc4-4.png) no-repeat;
}

.section-4-pic{
height:149px;
background-position:center center;

}
.section-4-text{
height:17px;
line-height:17px;
text-align:center;
}
.section-5{
background:url(img/sc5.jpg) no-repeat;
background-size:100% 100%;
color:#ffffff;
}
.section-5-pic{
width:209px;
height:221px;
background:url(img/sc5-1.png) no-repeat;
position:absolute;
top:92px;
left:50%;
margin-left:-104px;
}
.section-5-title{
width:480px;
margin-left:-240px;
top:355px;
}
.section-5-red{
background-color:white;
top:431px;
}
.section-5-subtitle{
width:694px;
margin-left:-347px;
top:461px;
}
.section-6{
height:201px;
background-color:#fff;

}
.section-6-text{
color:#5d191e;
width:243px;
height:61px;
position:absolute;
left:50%;
top:50%;
margin-top:-30px;
margin-left:-121px;
line-height:61px;
text-align:center;
border:1px solid #707070;
}
.finally{
color:#000;
text-decoration:none;
}
footer{
height:93px;
width:1902px;
background-color:#000000;
color:#ffffff;
font-size:12px;
position:relative;
}
.footer-ul{
width:654px;
position:absolute;
top:30px;
left:50%;
list-style:none;
margin-left:-327px;
}
.footer-li{
float:left;
margin:0 14px;
}
a{text-decoration:none;color:#fff;}
.footer-logo{
color:#787d82;
width:561px;
position:absolute;
top:56px;
left:50%;
margin-left:-280px;
font-size:16px;
}
.side-nav{
width:40px;
height:240px;
position:fixed;
right:0px;
bottom:25%;
background-color:#fff;
z-index:3;
box-shadow:0 0 2px 0 rgba(0,0,0,0.2) inset;
border-right:0px;

}
.side-nav-li{
display:block;
height:40px;
list-style:none;
text-align:center;
line-height:40px;
}
.side-nav-li a{color:#000;}
//导航条
.header{transition:all 0.3s;}
.header-status{
background-color:rgba(255,255,255,0.8);
}
.header-status .header-logo,.header-status .header-nav-li{
color:#000;
}

.header-logo,.header-nav-li-1,.header-nav-li-2,.header-nav-li-3,.header-nav-li-4,.header-nav-li-5,.header-nav-li-6,
.section-1-subtitle,.section-2-subtitle,.title-red,.section-2-pictwo,
.section-3-title,.section-3-subtitle,.section-3-red,.section-3-circle-1,.section-3-circle-2,.section-3-circle-3,.section-3-circle-4,.section-3-circle-5,
.section-4-title,.section-4-subtitle,.section-4-red,.section-4-cell-1,.section-4-cell-2,.section-4-cell-3,.section-4-cell-4
{
transition:all 2s;
}

.section-1-title,.section-2-title,.section-3-bg,.section-5-pic,.section-5-title,.section-5-red{transition:all 1s;}

.section-2-picthree{transition:all 0.5s 1.5s;}

.section-5-subtitle{transition:all 2s 1s;}

.header-logo-init,.header-nav-li-1-init,.header-nav-li-2-init,.header-nav-li-3-init,.header-nav-li-4-init,.header-nav-li-5-init,.header-nav-li-6-init,
.section-3-circle-1-init,.section-3-circle-2-init,.section-3-circle-3-init,.section-3-circle-4-init,.section-3-circle-5-init
{opacity:0;transform:translate(0,-100%);}

.section-1-title-init,.section-1-subtitle-init,
.section-2-title-init,.section-2-subtitle-init,.section-2-picthree-init,
.section-3-subtitle-init,
.section-5-subtitle-init
{opacity:0;transform:translate(0,100%);}

.header-logo-done,.header-nav-li-1-done,.header-nav-li-2-done,.header-nav-li-3-done,.header-nav-li-4-done.header-nav-li-5-done,.header-nav-li-6-done,
.section-1-title-done,.section-1-subtitle-done,
.section-2-subtitle-done,.section-2-picthree-done,
.section-3-subtitle-done,.section-3-circle-1-done,.section-3-circle-2-done,.section-3-circle-3-done,.section-3-circle-4-done,.section-3-circle-5-done,
.section-5-subtitle-done
{opacity:1;transform:translate(0,0);}

.section-2-red-init,.section-3-red-init{opacity:0;transform:translate(0,50px);}
.section-2-red-done,.section-3-red-done{opacity:1;transform:translate(0,0);}
.section-2-pictwo-init,.section-3-title-init,
.section-4-title-init,.section-4-subtitle-init,.section-4-red-init,.section-4-cell-1-init,.section-4-cell-2-init,.section-4-cell-3-init,.section-4-cell-4-init,
.section-5-title-init,.section-5-red-init{opacity:0;}
.section-2-pictwo-done,.section-3-title-done,
.section-4-title-done,,.section-4-subtitle-done,.section-4-red-done,.section-4-cell-1-done,.section-4-cell-2-done,.section-4-cell-3-done,.section-4-cell-4-done,
.section-5-title-done,.section-5-red-done{opacity:1;}
.section-3-bg-init,.section-5-pic-init{transform:scale(0.1);}
.section-3-bg-done,.section-5-pic-done{transform:scale(1);}

</style>
</head>
<body>
<header class="header">
  <div class="header-logo">H5实战页面</div>
  <div class="header-nav">
   <ul>
    <li class="header-nav-li header-nav-li-1">实战课程</li>
    <li class="header-nav-li header-nav-li-2">商业案例</li>
    <li class="header-nav-li header-nav-li-3">课程体系</li>
    <li class="header-nav-li header-nav-li-4">生成环境</li>
    <li class="header-nav-li header-nav-li-5">云端学习</li>
    <li class="header-nav-li header-nav-li-6 button">即刻学习</li>
   </ul>
  </div>

</header>
<section class="section section-1">
  <div class="clear"></div>
  <a href="#" name="section1"></a>
  <div class="section-1-title title">实战课程重磅上线</div>
  <div class="section-1-subtitle subtitle">一键云学习，还在等待什么</div>
</section>
<section class="section section-2">
<a href="#" name="section2"></a>
  <div class="title section-2-title">每门课都是真实案例</div>
  <div class="title-red section-2-red"></div>
  <div class="section-2-subtitle subtitle">真实案例，真实场景，在实战实践，操作，调试</br>大牛带你体验BAT真实开发流程，所有开发过程——为你呈现</div>
  <div class="section-2-pic section-2-picone"></div>
  <div class="section-2-pic section-2-picthree"></div>
  <div class="section-2-pic section-2-pictwo"></div>

</section>
<section class="section section-3">
<a href="#" name="section3"></a>
  <img src="img/sc3.png" class="section-3-bg"/>
  <div class="title section-3-title">强大的语言课程体系支持</div>
  <div class="subtitle section-3-subtitle">学习环境与课程轻松对接，安装，调试，写入部署，运行，一站式解决</br>,让你体验开发全流程</div>
  <div class="title-red section-3-red"></div>
  <div class="section-3-circle">
   <div class="circle section-3-circle-1">HTML</div>
   <div class="circle section-3-circle-2">PHP</div>
   <div class="circle section-3-circle-3">JAVA</div>
   <div class="circle section-3-circle-4">Python</div>
   <div class="circle section-3-circle-5">Node.js</div>
  </div>
</section>
<section class="section section-4">
<a href="#" name="section4"></a>
  <div class="title section-4-title">省去本地复杂的环境</div>
  <div class="title-red section-4-red"></div>
  <div class="subtitle section-4-subtitle">你可以告别在虚拟机中调试开发了</div>
  <div class="section-4-pics">
   <div class="section-4-cell section-4-cell-1">
    <div class="section-4-pic section-4-picone"></div>
    <div class="section-4-text">实战课程集成开发环境</div>
   </div>
    <div class="section-4-cell section-4-cell-2">
    <div class="section-4-pic section-4-pictwo"></div>
    <div class="section-4-text">内置终端命令行</div>
   </div>
    <div class="section-4-cell section-4-cell-3">
    <div class="section-4-pic section-4-picthree"></div>
    <div class="section-4-text">编译你的应用程序</div>
   </div>
    <div class="section-4-cell section-4-cell-4">
    <div class="section-4-pic section-4-picfour"></div>
    <div class="section-4-text">通过云端服务输出效果</div>
   </div>
  </div>
</section>
<section class="section section-5">
<a href="#" name="section5"></a>
  <div class="section-5-pic"></div>
  <div class="title section-5-title">云端学习可以这样简单</div>
  <div class="title-red section-5-red"></div>
  <div class="subtitle section-5-subtitle">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</div>
</section>
<section class="section section-6">
  <div class=section-6-text><a href="#section1" class="finally">继续了解学习体验</a></div>
</section>
<footer>
   <ul class="footer-ul">
    <li class="footer-li"><a href="#">网站首页</a></li>
    <li class="footer-li"><a href="#">人才招聘</a></li>
    <li class="footer-li"><a href="#">联系我们</a></li>
    <li class="footer-li"><a href="#">高校联盟</a></li>
    <li class="footer-li"><a href="#">关于我们</a></li>
    <li class="footer-li"><a href="#">讲师招聘</a></li>
    <li class="footer-li"><a href="#">意见反馈</a></li>
    <li class="footer-li"><a href="#">友情链接</a></li>
   </ul>
  <div class="footer-logo">Copyright © 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</div>
</footer>
<div class="side-nav">
   <ul>
    <li class="side-nav-li header-nav-li-1"><a href="#section1">实</a></li>
    <li class="side-nav-li header-nav-li-2"><a href="#section2">商</a></li>
    <li class="side-nav-li header-nav-li-3"><a href="#section3">课</a></li>
    <li class="side-nav-li header-nav-li-4"><a href="#section4">生</a></li>
    <li class="side-nav-li header-nav-li-5"><a href="#section5">云</a></li>

   </ul>
  </div>
<script>
//基本函数
//获得元素
var getEle=function(selector){
  return document.querySelector(selector);
}
//获得属性
var getAttr=function(element){
  return element.getAttribute('class');
}
//设置属性
var setAttr=function(element,cls){
  return element.setAttribute('class',cls);
}
//添加属性
var addAttr=function(element,cls){
  var baseCls=getAttr(element);
  if(baseCls.indexOf(cls)===-1) setAttr(element,baseCls+' '+cls);

}
//删除属性
var removeAttr=function(element,cls){
  var baseCls=getAttr(element);
  return setAttr(element,baseCls.split(cls).join(' ').replace(/\s+/g,''));
}
//所有需要改变的元素
var screenAnimateElement={
   '.section-1':['.section-1-title','.section-1-subtitle','.header-logo','.header-nav-li-1','.header-nav-li-2','.header-nav-li-3','.header-nav-li-4','.header-nav-li-5','.header-nav-li-6'],
   '.section-2':['.section-2-title','.section-2-subtitle','.section-2-pictwo','.section-2-picthree','.section-2-red'],
   '.section-3':['.section-3-title','.section-3-subtitle','.section-3-bg','.section-3-circle-1','.section-3-circle-2','.section-3-circle-3','.section-3-circle-4','.section-3-circle-5','.section-3-red'],
   '.section-4':['.section-4-title','.section-4-subtitle','.section-4-red','.section-4-cell-1','.section-4-cell-2','.section-4-cell-3','.section-4-cell-4'],
   '.section-5':['.section-5-title','.section-5-subtitle','.section-5-pic','.section-5-red']
  };
/*var setAnimateDone=function(animateKey){
  var screen=getEle(animateKey);
  var animate=screenAnimateElement[animateKey];

}*/

var setAnimateInit=function(animateKey){
  var screen=document.querySelector(animateKey);
  var animate=screenAnimateElement[animateKey];
   for(var i=0;i<animate.length;i++){
    var element=document.querySelector(animate[i]);
    var Cls=element.getAttribute('class');
    element.setAttribute('class',Cls+' '+animate[i].substr(1)+'-init');
   }
  }
var setAnimateDone=function(animateKey){
  var screen=document.querySelector(animateKey);
  var animate=screenAnimateElement[animateKey];
  for(var i=0;i<animate.length;i++){
   var element=document.querySelector(animate[i]);
   var Cls=element.getAttribute('class');
   element.setAttribute('class',Cls.replace('-init','-done'));
}
  return;
  }


//导航条
var head=document.querySelectorAll('.header-nav-li');
var index=0;
for(var a=0;a<head.length;a++){
  var headCls=head[a].getAttribute('class');
  head[a].setAttribute('data-index',index);
  console.log('data-index');
/* head[i].onmouseover=function(){
   if(activeCls.indexOf(active)===-1){
   for(var i=0;i<5;i++){
    var activeAllCls=activeall[i].getAttribute('class');
    console.log(activeAllCls);
    activeall[i].setAttribute('class',activeAllCls.split('active').join(' ').replace(/\s+/g,' '));
   }
   active.setAttribute('class',activeCls+' '+'active');
  }
  }*/
}
//初始化页面
window.onload=function(){
  for(k in screenAnimateElement){
   setAnimateInit(k);
  }
}

//滚动条及导航条变动
window.onscroll=function(){
  var top=document.documentElement.scrollTop;
  var activeall=document.querySelectorAll('.header-nav-li');
  if(top>500){
   addAttr(getEle('.header'),'header-status');
  }
  else removeAttr(getEle('.header'),'header-status');
  if(top>=0){
   setAnimateDone('.section-1');
   var active=document.querySelector('.header-nav-li-1');
   var activeCls=active.getAttribute('class');
   if(activeCls.indexOf(active)===-1){
    for(var i=0;i<5;i++){
     var activeAllCls=activeall[i].getAttribute('class');
     activeall[i].setAttribute('class',activeAllCls.split('active').join(' ').replace(/\s+/g,' '));
   }
   active.setAttribute('class',activeCls+' '+'active');

  }
  }
  if(top>500*1){
   setAnimateDone('.section-2');
   var active=document.querySelector('.header-nav-li-2');
   var activeCls=active.getAttribute('class');
   if(activeCls.indexOf(active)===-1){
    for(var i=0;i<5;i++){
     var activeAllCls=activeall[i].getAttribute('class');
     activeall[i].setAttribute('class',activeAllCls.split('active').join(' ').replace(/\s+/g,' '));
    }
   active.setAttribute('class',activeCls+' '+'active');
   console.log(activeCls.indexOf('active'));
  }
  }
  if(top>500*2){
   setAnimateDone('.section-3');
   var active=document.querySelector('.header-nav-li-3');
   var activeCls=active.getAttribute('class');
   if(activeCls.indexOf(active)===-1){
    for(var i=0;i<5;i++){
     var activeAllCls=activeall[i].getAttribute('class');
     activeall[i].setAttribute('class',activeAllCls.split('active').join(' ').replace(/\s+/g,' '));
    }
   active.setAttribute('class',activeCls+' '+'active');
  }
  }
  if(top>500*3){
   setAnimateDone('.section-4');
   var active=document.querySelector('.header-nav-li-4');
   var activeCls=active.getAttribute('class');
   if(activeCls.indexOf(active)===-1){
    for(var i=0;i<5;i++){
     var activeAllCls=activeall[i].getAttribute('class');
     activeall[i].setAttribute('class',activeAllCls.split('active').join(' ').replace(/\s+/g,' '));
    }
   active.setAttribute('class',activeCls+' '+'active');
  }
  }
  if(top>500*4){
   setAnimateDone('.section-5');
   var active=document.querySelector('.header-nav-li-5');
   var activeCls=active.getAttribute('class');
   if(activeCls.indexOf(active)===-1){
    for(var i=0;i<5;i++){
     var activeAllCls=activeall[i].getAttribute('class');
     activeall[i].setAttribute('class',activeAllCls.split('active').join(' ').replace(/\s+/g,' '));
    }
   active.setAttribute('class',activeCls+' '+'active');
  }
  }

}

/*setAnimate(".section-1");
setAnimate(".section-2");
setAnimate(".section-3");
setAnimate(".section-4");
setAnimate(".section-5");
  function setAnimate(animateKey){
  var screen=document.querySelector(animateKey);
  var animate=screenAnimateElement[animateKey];
  var isSetAnimate=false;
  var isSetInit=false;
  screen.onclick=function(){
   if(isSetAnimate===false){
   for(var i=0;i<animate.length;i++){
    var element=document.querySelector(animate[i]);
    var Cls=element.getAttribute('class');
    element.setAttribute('class',Cls+' '+animate[i].substr(1)+'-init');
   }
   isSetAnimate=true;
   return;
   }


  //init>>done
  if(isSetInit===false){
   for(var i=0;i<animate.length;i++){
     var element=document.querySelector(animate[i]);
     var Cls=element.getAttribute('class');
     element.setAttribute('class',Cls.replace('-init','-done'));
   }
   isSetInit=true;
   return;
  }
  if(isSetInit===true){
   for(var i=0;i<animate.length;i++){
     var element=document.querySelector(animate[i]);
     var Cls=element.getAttribute('class');
     element.setAttribute('class',Cls.replace('-done','-init'));
   }
   isSetInit=false;
   return;
  }
  }
}*/
</script>
</body>
</html>

慕用7018409 2020-03-09

源自：宣传页项目 5-6 作业题

收起

2回答

bbbboom 回答被采纳获得+3积分 2020-03-09 19:56:42

你把active用引号包下就行了

收起回答

好帮手慕言 2020-03-09 15:16:58

同学你好，指的是第一屏的元素有显示-->隐藏-->显示的过程吗？如果是的话，那么是因为js中在window.onload中调用了初始动画的事件。建议：去掉window.onload，第一屏默认是有从隐藏到显示的过程，可以在html中添加初始化类，具体操作可以参考下方截图：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕用7018409 #1

我创建了一个active类，当滚动条移动时头部的导航条会有一个红色的下划线。我在函数中已经定义当滚动条的值大于0时，如果头部的导航条中的li没有active则添加active类，但当我在第一屏移动时不知道为什么导航条的第一个li的class中出现了多个active？

2020-03-09 15:23:53