导航条问题

导航条问题

# 具体遇到的问题

导航条添加“header_status_back”类之后 但是导航条里面的文字没变变成白色，js中元素样式可以被添加上但是里面内容颜色没有发生变化


# 报错信息的截图
http://img1.sycdn.imooc.com//climg/5fb4d8ba09d2f53613200498.jpg

# 相关课程内容截图
http://img1.sycdn.imooc.com//climg/5fb4d8e4094497a312780558.jpg

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

/*

BEM 设计模式


模块（没有前缀，多个单词用 - 连接）

元素（元素在模块之后，可以有多个层级，以 __ 连接）

修饰（某元素、或者某模块特别的状态，必须有一个状态名和状态值，使用 _ 链接）


*/


.header {

  background-color: #f7f7f7;

}

.header__wrap {

  position: relative;

  margin: 0 auto;

  width: 1200px;

  height: 80px;

}

.header__logo {

  position: absolute;

  top: 50%;

  left: 20px;

  margin-top: -19px;

  width: 150px;

  height: 38px;

  font-size: 20px;

  line-height: 38px;

  color: #07111b;

  text-indent: 50px;

  background: url("../img/logo.png") no-repeat left center;

  background-size: 38px 38px;

}

.header__nav {

  position: absolute;

  right: 20px;

  top: 50%;

  margin-top: -19px;

  height: 38px;

}

.header__nav-item {

  position: relative;

  float: left;

  display: block;

  margin-left: 40px;

  height: 38px;

  line-height: 38px;

  font-size: 14px;

  color: #292f35;

}

.header__nav-item:hover {

  color: #f01400;

}

.header__nav-item_status_active {

  color: #f01400;

}

.header__nav-item_status_active::after {

  content: " ";

  display: block;

  width: 100%;

  height: 2px;

  position: absolute;

  background-color: #f01400;

  left: 0;

  bottom: 0;

}

.header__nav-item_custom_button {

  width: 90px;

  color: #f4f4f5;

  text-align: center;

  background-color: #000;

  border-radius: 3px;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -ms-border-radius: 3px;

  -o-border-radius: 3px;

}

/* 第一屏 */

.screen-1 {

  position: relative;

  height: 800px;

  background: url("../img/bg-screen-1.png") center center;

  background-size: cover;

}

.screen-1__heading {

  margin: 0;

  padding: 152px 0 0 0;

  font-size: 46px;

  font-weight: normal;

  text-align: center;

  color: #4d555d;

}

.screen-1__heading b {

  font-weight: normal;

  color: #f01400;

}

.screen-1__phone {

  position: absolute;

  left: 50%;

  bottom: 180px;

  margin-left: -687px;

  width: 1375px;

  height: 305px;

  background: url("../img/screen-1-phone.png") no-repeat center center;

  z-index: 2;

}

.screen-1__shadow {

  position: absolute;

  left: 50%;

  bottom: 30px;

  margin-left: -616px;

  width: 1233px;

  height: 411px;

  background: url("../img/screen-1-shadow.png") no-repeat center center;

  z-index: 1;

  opacity: 0.8;

}

/* 第二屏 */

.screen-2 {

  position: relative;

  height: 800px;

  background-color: #fafafa;

  overflow: hidden;

}

.screen-2__heading {

  margin: 0;

  padding: 96px 0 0 0;

  font-size: 46px;

  line-height: 46px;

  font-weight: normal;

  text-align: center;

  color: #f01400;

}

.screen-2__subheading {

  margin: 0;

  padding: 25px 0 0 0;

  font-size: 14px;

  line-height: 28px;

  font-weight: normal;

  text-align: center;

  color: #2c313c;

}

.screen-2__phone {

  position: absolute;

  left: 50%;

  bottom: -345px;

  margin-left: -464px;

  width: 928px;

  height: 873px;

  background: url("../img/screen-2-phone.png") no-repeat center center;

  z-index: 2;

}

.screen-2__point {

  position: absolute;

  padding-right: 112px;

  width: 108px;

  height: 22px;

  font-size: 22px;

  line-height: 22px;

  color: #4d555d;

  background: url("../img/icon-point-right.png") no-repeat center right;

}

.screen-2__point__custom_right {

  padding: 0 0 0 112px;

  background: url("../img/icon-point-left.png") no-repeat center left;

}

.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 {

  position: relative;

  height: 800px;

  background: url("../img/bg-screen-3.png") center center;

  background-size: cover;

  overflow: hidden;

}

.screen-3__wrap {

  position: relative;

  margin: 0 auto;

  width: 1200px;

  height: auto;

}

.screen-3__heading {

  padding-top: 94px;

  font-size: 46px;

  line-height: 46px;

  text-align: left;

  color: #fff;

}

.screen-3__subheading {

  padding-top: 25px;

  font-size: 14px;

  line-height: 28px;

  text-align: left;

  color: #fff;

}

.screen-3__phone {

  position: absolute;

  top: 195px;

  right: 0;

  bottom: -345px;

  width: 750px;

  height: 873px;

  background: url("../img/screen-3-phone.png") no-repeat center top;

  z-index: 2;

}

.screen-3__features {

  position: absolute;

  top: 395px;

  left: 0;

  width: 324px;

  height: 280px;

}

.screen-3__features__item {

  float: left;

  margin: 0 20px 20px 0;

  width: 138px;

  height: 118px;

  text-align: center;

  border: 1px solid #cb7173;

  border-radius: 3px;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -ms-border-radius: 3px;

  -o-border-radius: 3px;

  color: #fff;

}

.screen-3__features__item__number {

  padding: 28px 0 8px;

  height: 36px;

  font-size: 36px;

  line-height: 36px;

}

.screen-3__features__item__desc {

  height: 14px;

  font-size: 14px;

  line-height: 14px;

}

/* 第四屏 */


.screen-4 {

  position: relative;

  height: 800px;

  background-color: #fff;

  overflow: hidden;

}

.screen-4__wrap {

  position: relative;

  margin: 0 auto;

  width: 1200px;

  height: auto;

}

.screen-4__heading {

  padding-top: 135px;

  font-size: 46px;

  line-height: 46px;

  text-align: center;

  color: #f01400;

}

.screen-4__subheading {

  padding-top: 29px;

  font-size: 14px;

  line-height: 28px;

  text-align: center;

  color: #464a4f;

}

.screen-4__type {

  position: absolute;

  top: 304px;

  width: 1260px;

  height: 270px;

  margin-left: 40px;

}

.screen-4__type__item {

  width: 220px;

  margin-right: 90px;

  height: 270px;

  float: left;

  position: relative;

  text-align: center;

  background-size: cover;

}

.screen-4__type__item_i_1 {

  background: url(../img/phone-1.png) no-repeat left top;

}

.screen-4__type__item_i_2 {

  background: url(../img/phone-2.png) no-repeat left top;

}

.screen-4__type__item_i_3 {

  background: url(../img/phone-3.png) no-repeat left top;

}

.screen-4__type__item_i_4 {

  background: url(../img/phone-4.png) no-repeat left top;

}

.screen-4__type__item__color {

  width: 100%;

  height: 14px;

  line-height: 14px;

  font-size: 14px;

  color: #2c3238;

  position: absolute;

  bottom: -44px;

}

.screen-4__type__item__storage {

  width: 100%;

  height: 12px;

  line-height: 12px;

  font-size: 12px;

  color: #a4a9a1;

  position: absolute;

  bottom: -66px;

}


/* 第五屏 */

.screen-5 {

  position: relative;

  height: 800px;

  background-color: #d9dde1;

  overflow: hidden;

}

.screen-5__bg {

  width: 1920px;

  height: 433px;

  background: url("../img/bg-screen-5.png") no-repeat center;

  background-size: contain;

  position: absolute;

  bottom: -100px;

  left: 50%;

  margin-left: -960px;

}

.screen-5__heading {

  padding-top: 130px;

  font-size: 46px;

  line-height: 46px;

  text-align: center;

  color: #f01400;

}

.screen-5__subheading {

  padding-top: 29px;

  font-size: 14px;

  line-height: 28px;

  text-align: center;

  color: #464a4f;

}

/* 第六屏 */

.screen-buy {

  position: relative;

  /* height: 320px; */

  height: 80px;

  padding: 120px 0 120px 0;

  background: #2b333b url("../img/bg-screen-buy.png") no-repeat center center;

  background-size: cover;

  overflow: hidden;

  text-align: center;

}

.screen-buy__button {

  display: inline-block;

  height: 80px;

  width: 240px;

  font-size: 24px;

  line-height: 80px;

  text-align: center;

  color: #fff;

  background-color: #f01414;

  border-radius: 3px;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -ms-border-radius: 3px;

  -o-border-radius: 3px;

  /* 为hover效果添加一个效果 使得hover不这么生硬 */

  transition: all 0.5s;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -ms-transition: all 0.5s;

  -o-transition: all 0.5s;

}

.screen-buy__button:hover {

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}

/* 底部 */

.footer {

  height: 80px;

  text-align: center;

  color: #fff;

  font-size: 12px;

  line-height: 80px;

  background-color: #07111b;

}


/* outline css */

.outline {

  position: fixed;

  padding: 5px 10px;

  bottom: 120px;

  right: 0;

  z-index: 3;

  background-color: #fff;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

}

.outline__item {

  display: block;

  width: 40px;

  height: 30px;

  line-height: 30px;

  padding: 5px 0;

  background-color: #fff;

  margin-top: 5px;

  border-top: 1px solid #eee;

  color: #939992;

}

.outline__item:first-child {

  border: none;

}

.outline__item:active {

  color: #f01400;

}


/* 导航条样式设置 */

.header {

  transition: all 1s;

  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -ms-transition: all 1s;

  -o-transition: all 1s;

}

.header_status_back {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.5);

  z-index: 3;

}

.header_status_black .header__nav-item,

.header_status_black .header__logo {

  color: #fff;

}

.header_status_black .header__nav-item_status_active {

  color: red;

}

.header_status_black .header__nav-item:hover {

  transition: all 1s;

  color: red;

}


/* 大纲出现 */

.outline {

  transform: translate(100%, 0);

  transition: all 1s;

}


.outline_status_in {

  transform: translate(0, 0);

}


.outline__item {

  transition: all 1s;

}



js

/*

1.页面载入完成后所有的动画元素设置_animate_init

2.页面滚动到某一屏 开始播放动画/导航条，大纲出现

3.导航条，大纲联动（双向定位-滚动导航条定位/大纲定位）

4.导航条滑动门特效

*/

// 1


// 获取元素

var getElem = function (selector) {

    return document.querySelector(selector);

}

var getAllElem = function (selector) {

    return document.querySelectorAll(selector);

}

// 获取元素的样式

var getCls = function (element) {

    return element.getAttribute('class');

  }

// 设置元素的样式

var setCls = function (element, cls) {

    return element.setAttribute('class', cls)

}

// 为元素添加样式

var addCls = function (element, cls) {

    var baseCls = getCls(element);

    if (baseCls.indexOf(cls) === -1) {

        setCls(element, baseCls + " " + cls)

    }

    return;

}


// 为元素删除样式

var delCls = function (element, cls) {

    var baseCls = getCls(element);

    if (baseCls.indexOf(cls) != -1) {

        setCls(element, baseCls.split(cls).join(' ').replace(/\s+/g, ' '));

    }

    return;

}


// 1.初始化样式init


var screenAnimateElements = {

    '.screen-1': [

        '.screen-1__heading',

        '.screen-1__phone',

        '.screen-1__shadow'

    ],

    '.screen-2': [

        '.screen-2__heading',

        '.screen-2__subheading',

        '.screen-2__phone',

        '.screen-2__point_i_1',

        '.screen-2__point_i_2',

        '.screen-2__point_i_3',

    ],

    '.screen-3': [

        '.screen-3__heading',

        '.screen-3__phone',

        '.screen-3__subheading',

        '.screen-3__features',

    ],

    '.screen-4': [

        '.screen-4__heading',

        '.screen-4__subheading',

        '.screen-4__type__item_i_1',

        '.screen-4__type__item_i_2',

        '.screen-4__type__item_i_3',

        '.screen-4__type__item_i_4',

    ],

    '.screen-5': [

        '.screen-5__heading',

        '.screen-5__subheading',

        '.screen-5__bg',

    ]

}

function setScreenAnimateInit(screenCls) {

    var screen = document.querySelector(screenCls);  // 获取当前屏的元素

    var animateElements = screenAnimateElements[screenCls];// 获取需要设置动画的元素

    for (var i = 0; i < animateElements.length; i++) {

        var element = document.querySelector(animateElements[i]);

        var baseCls = element.getAttribute('class');

        // console.log(baseCls);

        element.setAttribute('class', baseCls + ' ' + animateElements[i].substr(1) + '_animate_init');

    }

}

window.onload = function () {

    // 为所有元素设置init

    for (k in screenAnimateElements) {

        setScreenAnimateInit(k);

    }

    console.log('load');

}


// 2.滚动到哪就播放到哪

// 滚动条设置

function playScreenAnimateDone(screenCls) {

    var screen = document.querySelector(screenCls);  // 获取当前屏的元素

    var animateElements = screenAnimateElements[screenCls];// 获取需要设置动画的元素

    for (var i = 0; i < animateElements.length; i++) {

        var element = document.querySelector(animateElements[i]);

        var baseCls = element.getAttribute('class');

        // console.log(baseCls);

        element.setAttribute('class', baseCls.replace('_animate_init', '_animate_done'));

    }

}

window.onscroll = function () {

    var top = document.documentElement.scrollTop || document.body.scrollTop;

    if (top > 100) {

        addCls(getElem('.header'), 'header_status_back');

        playScreenAnimateDone('.screen-1');

    } else {

        delCls(getElem('.header'), 'header_status_back');

    }

    if (top > 400) {

        addCls(getElem('.outline'), 'outline_status_in');

    } else {

        delCls(getElem('.outline'), 'outline_status_in');

    }

    if (top > (800 * 1-100)) {

        playScreenAnimateDone('.screen-2');


    }

    if (top > (800 * 2-100)) {

        playScreenAnimateDone('.screen-3');

    }

    if (top > (800 * 3-100)) {

        playScreenAnimateDone('.screen-4');

    }

    if (top > (800 * 4-100)) {

        playScreenAnimateDone('.screen-5');

    }

}


// 3.导航条，大纲联动（双向定位-滚动导航条定位/大纲定位）

// 导航条点击页面跳转

var navItems = getAllElem('.header__nav-item');

var setNavJump = function(i,lib) {

    var elem = lib[i];

    elem.onclick = function() {

        document.body.scrollTop=i*800;

    }

}

for (var i = 0; i < navItems.length; i++) {

    setNavJump(i,navItems);

}


​html

<html>


<head>

    <meta charset="utf-8">

    <title>慕课手机</title>

    <link rel="stylesheet" type="text/css" href="./css/base.css" />

    <link rel="stylesheet" type="text/css" href="./css/index.css" />

    <link rel="stylesheet" type="text/css" href="./css/animate.css" />

</head>


<body>

    <header class="header">

        <div class="header__wrap">

            <div class="header__logo">慕课手机</div>

            <nav class="header__nav">

                <a href="javascript:;" class="header__nav-item">首页</a>

                <a href="javascript:;" class="header__nav-item">外观</a>

                <a href="javascript:;" class="header__nav-item">配置</a>

                <a href="javascript:;" class="header__nav-item">型号</a>

                <a href="javascript:;" class="header__nav-item">说明</a>

                <a href="javascript:;" class="header__nav-item header__nav-item_custom_button">立即购买</a>

            </nav>

        </div>

    </header>

    <div class="screen-1">

        <h2 class="screen-1__heading"><b>慕课手机</b> 让你的生活更精彩</h2>

        <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__subheading">采用受欢迎的设计，让它更加出色。<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__custom_right screen-2__point_i_2">超薄机身</div>

            <div class="screen-2__point screen-2__point__custom_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__subheading">采用受欢迎的设计，让它更加出色。<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__decs">英寸大屏</div>

                </div>

                <div class="screen-3__features__item">

                    <div class="screen-3__features__item__number">1200</div>

                    <div class="screen-3__features__item__decs">万像素</div>

                </div>

                <div class="screen-3__features__item">

                    <div class="screen-3__features__item__number">3D</div>

                    <div class="screen-3__features__item__decs">touch</div>

                </div>

                <div class="screen-3__features__item">

                    <div class="screen-3__features__item__number">A9</div>

                    <div class="screen-3__features__item__decs">处理器</div>

                </div>

            </div>


        </div>

    </div>

    <div class="screen-4">

        <div class="screen-4__wrap">

            <h2 class="screen-4__heading">丰富的手机型号</h2>

            <h3 class="screen-4__subheading">找到适合你的手机</h3>

            <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>

    <div class="screen-5">

        <div class="screen-5__heading">游戏、学习、拍照，有这一部就够了</div>

        <div class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、通话相结合，一机多功能，让您生活更丰富精彩。

        </div>

        <div class="screen-5__bg"></div>

    </div>

    <div class="screen-buy">

        <a href="javascript:;" class="screen-buy__button">立即购买</a>

    </div>

    <footer class="footer">© 2016 imooc.com 京ICP备13046642号</footer>


    <div class="outline">

        <a href="javascript:;" class="outline__item">首页</a>

        <a href="javascript:;" class="outline__item">外观</a>

        <a href="javascript:;" class="outline__item">配置</a>

        <a href="javascript:;" class="outline__item">型号</a>

        <a href="javascript:;" class="outline__item">说明</a>

    </div>

    <script src="js/test.js"></script>

    <script src="js/index.js"></script>

</body>


</html>
MiMicccc 2020-11-18
源自：宣传页项目   5-3 JS实现交互动画(导航条)
20
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕言 回答被采纳获得+3积分 2020-11-19 17:25:10

​同学你好，类名写的不对。加在元素上的类名为header_status_back，而css中写的是.header_status_black，back多了一个字母l，建议：去掉字母l，如下：

http://img1.sycdn.imooc.com//climg/5fb639780963d5a106230133.jpg

祝学习愉快~

0
收起回答
  • MiMicccc 提问者 #1
    原来如此！谢谢老师
    2020-11-19 19:02:55
好帮手慕言 2020-11-18 18:09:16

同学你好，在同学提供的代码中，没有给导航项设置字体颜色的样式，建议：给导航项添加样式，例如：
http://img1.sycdn.imooc.com//climg/5fb4f22c09a6353805770126.jpg

祝学习愉快~

0
收起回答
  • 提问者 MiMicccc #1
    .header_status_black .header__nav-item, .header_status_black .header__logo { color: #fff; } 老师我添加了这个样式啊
    2020-11-19 16:47:04
  • 提问者 MiMicccc #2
    上面css里面有这个样式。。。。。。。。。
    2020-11-19 16:48:31
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

响应式导航条折叠
40 0 6
导航页码的数量又怎么配置呢
1 0 3
2-7作业导航问题
20 0 3
顶部导航条问题
16 0 4
为什么我的导航条不变色
13 0 7

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师