老师效果显示好像有点问题

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .content-part {
            width: 1000px;
            margin: 0 auto;
            margin-bottom: 0;
            background-color: #ccc;
            font-size: 50px;
        }
 
        .floornav {
            position: fixed;
            right: 20px;
            width: 100px;
            top: 50%;
            margin-top: -140px;
            height: 280px;
            background-color: orange;
        }
 
        .floornav ul {
            list-style: none;
        }
 
        .floornav ul li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 25px;
            cursor: pointer;
        }
 
        .floornav ul li.current {
            background: gold;
            color: white;
        }
    </style>
</head>
 
<body>
    <div class="floornav">
        <ul id="list">
            <li data-n="科技" class="current">科技</li>
            <li data-n="体育">体育</li>
            <li data-n="新闻">新闻</li>
            <li data-n="娱乐">娱乐</li>
            <li data-n="视频">视频</li>
            <li data-n="好看">好看</li>
            <li data-n="其他">其他</li>
        </ul>
    </div>
    <section class="content-part" style="height:674px" data-n="科技">科技栏目</section>
    <section class="content-part" style="height:548px" data-n="体育">体育栏目</section>
    <section class="content-part" style="height:762px" data-n="新闻">新闻栏目</section>
    <section class="content-part" style="height:895px" data-n="娱乐">娱乐栏目</section>
    <section class="content-part" style="height:556px" data-n="视频">视频栏目</section>
    <section class="content-part" style="height:840px" data-n="好看">好看栏目</section>
    <section class="content-part" style="height:430px" data-n="其他">其他栏目</section>
 
    <script>
        // 使用事件委托给li添加监听
        var list = document.getElementById("list");
        var contentParts = document.querySelectorAll(".content-part");
        var lis = document.querySelectorAll("#list li");
 
        list.onclick = function (e) {
            if (e.target.tagName.toLowerCase() == "li") {
                // getAttribute表示得到标签身上的某个属性值
                var n = e.target.getAttribute("data-n");
 
                // 可以用属性选择器（就是方括号选择器）来寻找带有相同的data-n的content-part
                var contentPart = document.querySelector(".content-part[data-n=" + n + "]");
 
                // 让页面的卷动自动成为这个盒子的offsetTop
                document.documentElement.scrollTop = contentPart.offsetTop;
            }
        }
 
        // 在页面加载好之后，将所有的content-part盒子的offsetTop值推入数组
        var offsetTopArr = [];
 
        // 遍历所有的contentParts，将他们的净位置推入数组
        for (var i = 0; i < contentParts.length; i++) {
            offsetTopArr.push(contentParts[i].offsetTop);
        }
 
        // 为了最后一项可以方便比较，我们可以推入一个无穷大
        offsetTopArr.push(Infinity);
 
        console.log(offsetTopArr);
 
        // 当前所在楼层
        var nowdfloor = -1;
 
        // 窗口的卷动
        window.onscroll = function () {
            var scrollTop = document.documentElement.scrollTop;
            // 遍历offsetTopArr数组，看看当前的acrollTop值在哪两个楼层之间
            for (var i = 0; i < offsetTopArr.length; i++) {
                if (scrollTop >= offsetTopArr[i] && scrollTop < offsetTopArr[i + 1]) {
                    break;
                }
            }
            // 退出循环的时候i是几 就表示当前楼层是几
            // 如果当前所在楼层不是i 就表示换楼了
            if (nowdfloor != i) {
                console.log(i);
                // 让全局变量改变为这个楼层号
                nowdfloor = i;
 
                // 设置类名-下标为i的项有current
                for (var j = 0; j < lis.length; j++) {
                    if (j == i) {
                        lis[j].className = "current";
                    } else {
                        lis[j].className = "";
                    }
                }
            }
        }
    </script>
</body>
 
</html>

搜索

复制

清夏_ 2022-08-09

源自：BOM基础 2-15 BOM特效开发（2）

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2022-08-09 17:09:50

同学你好，具体是指什么问题呢？可以参考老师们总结的图文节，调整后再测试下。如果还有问题，可以图文结合详细描述下，便于帮助同学准确的定位与解决问题。

祝学习愉快~

收起回答

清夏_ 提问者 #1

就是那个选中效果那块有点紊乱了没选中对应的版块

2022-08-09 17:12:44
清夏_ 提问者 #2

这块听的好迷糊好难......

2022-08-09 17:13:51
好帮手慕慕子回复提问者清夏_ #3

问题解答如下：
1、老师测试，只有点击最后一个选项卡时无法选中，原因是高度不高，在图文节也有提到这个问题和解决方法，如下：
建议：适当增加内容的高度后再测试。示例：
2、对于初学者来说第一次听不懂，觉得迷糊这些都是正常现象，同学不用过于焦虑，也没有其他更好的解决方案，就是要多听多练多思考，熟练后自然就好了。
祝学习愉快~

2022-08-09 17:19:11