老师，帮我看下哪错了，点击后原有的样式会乱并且报错
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课手机</title>
<link rel="stylesheet" type="text/css" href="css/phone.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<div class="total">
<!-- 头部 -->
<header class="header">
<div class="wrap">
<div class="header_logo">慕课手机</div>
<nav class="header_nav">
<a href="#" class="header_nav-item header_nav-item_active">外观</a>
<a href="#" class="header_nav-item">配置</a>
<a href="#" class="header_nav-item">型号</a>
<a href="#" class="header_nav-item">说明</a>
<a href="#" class="header_nav-item">其他产品</a>
<a href="#" class="header_nav-item header_nav-item-custom-button">立即购买</a>
</nav>
</div>
</header>
<!-- 第一屏 -->
<div class="screen-1">
<h2 class="screen-1-heading"><span>慕课手机</span> 让你的生活更精彩</h3>
<div class="screen-1-phone"></div>
<div class="screen-1-shadow"></div>
</div>
<!-- 第二屏 -->
<div class="screen-2">
<h2 class="screen-2-heading">优美的设计，更令人着迷</h2>
<h3 class="screen-2-sub-heading">采用受欢迎的设计，让它更加出色。<br/>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
<div class="screen-2-phone">
<div class="screen-2-point screen-2-point_i-1">高清摄像</div>
<div class="screen-2-point screen-2-point-custon-right screen-2-point_i-2">超薄机身</div>
<div class="screen-2-point screen-2-point-custon-right screen-2-point_i-3">大屏显示</div>
</div>
</div>
<!-- 第三屏 -->
<div class="screen-3">
<div class="screen-3-wrap">
<h2 class="screen-3-heading">外形小巧，功能强大的手机</h2>
<h3 class="screen-3-sub-heading">采用受欢迎的设计，让它更加出色。<br>
款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
<div class="screen-3-phone"></div>
<div class="screen-3-features">
<div class="screen-3-features-item">
<div class="screen-3-features-item-number">5.7</div>
<div class="screen-3-features-item-desc">英寸大屏</div>
</div>
<div class="screen-3-features-item">
<div class="screen-3-features-item-number">1200</div>
<div class="screen-3-features-item-desc">万像素</div>
</div>
<div class="screen-3-features-item">
<div class="screen-3-features-item-number">3D</div>
<div class="screen-3-features-item-desc">Touch</div>
</div>
<div class="screen-3-features-item">
<div class="screen-3-features-item-number">A9</div>
<div class="screen-3-features-item-desc">处理器</div>
</div>
</div>
</div>
</div>
<!-- 第四屏 -->
<div class="screen-4">
<div class="screen-4-wrap">
<h2 class="screen-4-heading">丰富的手机型号</h2>
<h3 class="screen-4-sub-heading">找到适合你的手机</h3>
</div>
<div class="screen-4-type">
<div class="screen-4-type-item screen-4-type-item_i-1">
<div class="screen-4-type-item-color">慕课红</div>
<div class="screen-4-type-item-storage">32G/64G/128G</div>
</div>
<div class="screen-4-type-item screen-4-type-item_i-2">
<div class="screen-4-type-item-color">土豪金</div>
<div class="screen-4-type-item-storage">32G/64G/128G</div>
</div>
<div class="screen-4-type-item screen-4-type-item_i-3">
<div class="screen-4-type-item-color">太空灰</div>
<div class="screen-4-type-item-storage">32G/64G/128G</div>
</div>
<div class="screen-4-type-item screen-4-type-item_i-4">
<div class="screen-4-type-item-color">绅士黑</div>
<div class="screen-4-type-item-storage">32G/64G/128G</div>
</div>
</div>
</div>
<!-- 第五屏 -->
<div class="screen-5">
<div class="screen-5-wrap">
<h2 class="screen-5-heading">游戏、学习、拍照，有这一部就够了</h2>
<h3 class="screen-5-sub-heading">看视频、拍摄高清视频与照片、视频聊天、通话相结合，一机多功能，让您生活更丰富精彩。
</h3>
</div>
<div class="screen-5-bg"></div>
</div>
<!-- 第六屏 -->
<div class="screen-buy">
<a class="screen-buy-button" href="#">立即购买</a>
</div>
<footer class="footer">© 2016 imooc.com 京ICP备13046642号</footer>
<div>
<script type="text/javascript" src="js/phone.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
a{
text-decoration: none;
}
h2,h3{
font-weight: normal;
}
.total{
/* width: 1220px; */
margin: 0 auto;
}
/* 头部 */
.header{
/* width: 1220px; */
background-color: #f7f7f7;
}
.wrap{
width: 1220px;
height: 80px;
position: relative;
margin: 0 auto;
}
.header_logo{
width: 100px;
height: 38px;
background: url('../img/logo.png') no-repeat;
background-size: 38px 38px;
padding-left: 50px;
font-size: 20px;
color: #07111b;
line-height: 38px;
position: absolute;
top: 50%;
margin-top: -19px;
left: 20px;
}
.header_nav{
position: absolute;
right: 20px;
height: 38px;
top: 50%;
margin-top: -19px;
}
.header_nav-item{
display: block;
float: left;
height: 38px;
color: #292f35;
font-size: 14px;
margin-left: 40px;
line-height: 38px;
text-align: center;
position: relative;
}
.header_nav-item:hover{
color: #f01400;
}
.header_nav-item_active{
color: #f01400;
}
.header_nav-item_active::after{
content: '';
display: block;
width: 100%;
height: 2px;
background-color:#f01400;
position: absolute;
left: 0;
bottom: 0;
}
.header_nav-item-custom-button{
color: #f4f4f5;
background-color: #07111b;
width: 90px;
border-radius: 3px;
}
/* 第一屏 */
.screen-1{
height: 800px;
background: url('../img/bg1.png') no-repeat center;
background-size: cover;
overflow: hidden;
position: relative;
}
.screen-1-heading{
font-size: 46px;
color: #4d555d;
text-align: center;
padding: 152px;
}
.screen-1-heading span{color:#f01400;}
.screen-1-phone{
background: url('../img/screen-1-phone.png') center no-repeat;
width: 1375px;
height: 305px;
position: absolute;
left: 50%;
margin-left: -687px;
bottom: 180px;
z-index: 2;
}
.screen-1-shadow{
background: url('../img/screen-1-shadow.png') center no-repeat;
width: 1233px;
height: 411px;
position: absolute;
left: 50%;
margin-left: -616px;
bottom:30px;
z-index: 1;
opacity: .7;
}
/* 第二屏 */
.screen-2{
height: 800px;
background-color: #fafafa;
position: relative;
overflow: hidden;
}
.screen-2-heading{
font-size: 46px;
color: #f01400;
text-align: center;
padding-top:90px ;
}
.screen-2-sub-heading{
width: 520px;
height: 28px;
line-height: 28px;
font-size: 14px;
color: #07111b;
text-align: center;
padding-top: 25px;
position: absolute;
left: 50%;
margin-left: -260px;
}
.screen-2-phone{
background: url('../img/screen-2-phone.png') center no-repeat;
width: 928px;
height: 873px;
position: absolute;
left: 50%;
margin-left: -464px;
bottom: -345px;
/* z-index: 2; */
}
.screen-2-point{
width: 108px;
padding-right: 112px;
font-size: 22px;
line-height: 22px;
color: #4d555d;
background: url('../img/icon-point-right.png') no-repeat center right;
position: absolute;
}
.screen-2-point-custon-right{
background: url('../img/icon-point-left.png') no-repeat center left;
padding: 0 0 0 112px;
}
.screen-2-point_i-1{
top: 150px;
left: -164px;
}
.screen-2-point_i-2{
top: 30px;
right: 130px;
}
.screen-2-point_i-3{
top: 330px;
right: 30px;
}
/* 第三屏 */
.screen-3{
height: 800px;
background: url('../img/bg-screen-3.png') no-repeat center;
background-size: cover;
overflow: hidden;
position: relative;
}
.screen-3-wrap{
width: 1200px;
height: 800px;
margin: 0 auto;
position: relative;
}
.screen-3-heading{
font-size: 46px;
color: #fff;
padding-top:90px ;
}
.screen-3-sub-heading{
height: 28px;
line-height: 28px;
font-size: 14px;
color: #fff;
padding-top: 25px;
}
.screen-3-phone{
background: url('../img/screen-3-phone.png') center top no-repeat;
width: 730px;
height: 873px;
position: absolute;
top: 200px;
right: 0;
/* z-index: 2; */
}
.screen-3-features{
position: absolute;
left: 0;
top: 398px;
width: 320px;
height: 280px;
}
.screen-3-features-item{
border: 1px solid #d07173;
width: 138px;
height: 118px;
margin:0 20px 20px 0;
float: left;
text-align: center;
color: #fff;
}
.screen-3-features-item-number{
height: 36px;
line-height: 36px;
font-size: 36px;
padding: 30px 0 7px;
}
.screen-3-features-item-desc{
height: 14px;
line-height: 14px;
font-size: 14px
}
/* 第四屏 */
.screen-4{
height: 800px;
background-color: #fff;
position: relative;
}
.screen-4-wrap{
width: 1200px;
height: 800px;
margin: 0 auto;
position: relative;
text-align: center;
}
.screen-4-heading{
font-size: 46px;
color: #f01400;
padding-top:135px ;
}
.screen-4-sub-heading{
height: 28px;
line-height: 28px;
font-size: 14px;
color: #464a4f;
padding-top: 29px;
}
.screen-4-type{
width: 1260px;
height: 270px;
position: absolute;
top: 304px;
margin-left: 55px;
}
.screen-4-type-item{
width: 220px;
height: 270px;
margin-right: 90px;
float: left;
position: relative;
text-align: center;
background-size: cover;
}
.screen-4-type-item-color{
width: 100%;
height: 14px;
line-height: 14px;
font-size: 14px;
color: #07111b;
text-align: center;
bottom: -44px;
position: absolute;
}
.screen-4-type-item-storage{
width: 100%;
position: absolute;
height: 12px;
line-height: 12px;
font-size: 12px;
color: #a4a9ae;
text-align: center;
bottom: -66px;
}
.screen-4-type-item_i-1{
background: url('../img/phone-1.png') left top no-repeat;
}
.screen-4-type-item_i-2{
background: url('../img/phone-2.png') left top no-repeat;
}
.screen-4-type-item_i-3{
background: url('../img/phone-3.png') left top no-repeat;
}
.screen-4-type-item_i-4{
background: url('../img/phone-4.png') left top no-repeat;
}
/* 第五屏 */
.screen-5{
position: relative;
overflow: hidden;
background-color: #d9dde1;
}
.screen-5-bg{
width: 100%;
height: 433px;
position: absolute;
background: url(../img/bg-screen-5.png) no-repeat center;
background-size:cover ;
bottom: -140px;
}
.screen-5-wrap{
height: 800px;
}
.screen-5-heading{
font-size: 46px;
color: #f01414;
text-align: center;
padding: 134px 0 30px 0;
}
.screen-5-sub-heading{
font-size: 14px;
color: #07111b;
text-align: center;
}
/* 第六屏 */
.screen-buy{
height: 320px;
background:#2b333b url('../img/bg-screen-buy.png') no-repeat center;
background-size: cover;
position: relative;
}
/* 立即购买 */
.screen-buy-button{
display: block;
height: 80px;
width: 240px;
background-color: #f01414;
color: #fff;
font-size: 24px;
line-height: 80px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -120px;
top: 118px;
border-radius: 3px;
transition: all .5s;
}
.screen-buy-button:hover{
box-shadow: 0 0 10px rgba(255, 255, 255, .5);
}
/* 页脚 */
.footer{
height:80px ;
font-size: 12px;
color: #fff;
line-height: 80px;
background-color: #07111b;
text-align: center;
}
.screen-heading{
transition: all 1s;
}
.screen-heading_animate_init{
opacity: 0;
transform: translate(0, -100%);
}
.screen-heading_animate_done{
opacity: 1;
transform: translate(0, 0);
}
var screenAnimateElements={
'.screen-1':[
'.screen-1-heading',
'.screen-1-phone',
'.screen-1-shadow',
]
}
function setScreenAnimate(screenCls){
var screen=document.querySelector(screenCls); //获取当前屏的元素
var animateElements=screenAnimateElements[screenCls]; //需要设置动画的元素
var isSetAnimateClass = false; //是否有初始化子元素的样式
var isElementDone=false;//当前屏幕下所有的子元素的状态是Done？
screen.onclick=function(){
//初始化样式，增加init
if (isSetAnimateClass===false) {
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);
var baseCls=element.getAttribute('class');
element.setAttribute('class',baseCls+''+animateElements[i].substr(1)+'_animate_init');
}
isSetAnimateClass=true;
return;
}
//切换所有的 animateElements 的 init -> done
if (isElementDone===false) {
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);
var baseCls=element.getAttribute('class');
element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
}
isElementDone=true;
return;
}
//切换所有的 animateElements 的 done -> init
if (isElementDone===true) {
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);
var baseCls=element.getAttribute('class');
element.setAttribute('class',baseCls.replace('_animate_done','_animate_init'));
}
isElementDone=false;
return;
}
}
}
setScreenAnimate('.screen-1');
正在回答
同学你好，这边使用同学提供的代码测试，没有出现报错。样式错乱是因为类名之间没有添加空格，没有写样式才没有达到效果。
可以参考下方：
写样式：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星