加了几个DIV后就出错，如何解决
如果没加的DIV 的话，就正常，加了就出错误了，但是使用过程中不可能不在里面嵌套DIV 的，这个问题如何解决？
<head>
<style type="text/css">
.somecontent {
width: 1000px;
height: 1232px;
margin: 0 auto;
background-color: #ccc;
}
.floor {
width: 1000px;
margin: 0 auto;
height: 400px;
background: yellowgreen;
margin-bottom: 10px;
}
.f1 {
height: 433px;
}
.f2 {
height: 352px;
}
.leftNav {
position: fixed;
bottom: 110px;
left: 10px;
width: 60px;
}
.leftNav ul {
list-style: none;
}
.leftNav ul li {
width: 60px;
height: 60px;
background-color: #ccc;
}
.leftNav ul li a {
display: block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
text-decoration: none;
font-size: 14px;
}
.leftNav ul li a.number {
display: block;
}
.leftNav ul li a.chinese {
display: none;
color: white;
}
.leftNav ul li.cur a.number {
display: none;
}
.leftNav ul li.cur a.chinese {
display: block;
}
.leftNav ul li.cur {
background-color: rgb(111, 0, 0);
}
</style>
</head>
<body>
<div class="somecontent"></div>
<div class="leftNav" id="leftNav">
<ul>
<li>
<a href="javascript:;" class="number">1F</a>
<a href="javascript:;" class="chinese">百货</a>
</li>
<li>
<a href="javascript:;" class="number">2F</a>
<a href="javascript:;" class="chinese">男装</a>
</li>
<li>
<a href="javascript:;" class="number">3F</a>
<a href="javascript:;" class="chinese">女装</a>
</li>
<li>
<a href="javascript:;" class="number">4F</a>
<a href="javascript:;" class="chinese">裤子</a>
</li>
<li>
<a href="javascript:;" class="number">5F</a>
<a href="javascript:;" class="chinese">童装</a>
</li>
<li>
<a href="javascript:;" class="number">6F</a>
<a href="javascript:;" class="chinese">运动</a>
</li>
<li>
<a href="javascript:;" class="number">7F</a>
<a href="javascript:;" class="chinese">电子</a>
</li>
</ul>
</div>
<div class="floor f1"></div>
<div class="floor f2">
<!--例如这里添加几个div <dic class="abc"></div><dic class="abc"></div><dic class="abc"></div><dic class="abc"></div><dic class="abc"></div> 就出现错误了-->
</div>
<div class="floor f3"></div>
<div class="floor f4"></div>
<div class="floor f5"></div>
<div class="floor f6"></div>
<div class="floor f7"></div>
<div class="somecontent"></div>
<script>
// 获取DOM元素
var leftBtnList = document.getElementById('leftNav').getElementsByTagName('li');
// 声明楼层数组，楼层高度数组
var floorArr = [];
var floorOffsetTopArr = [];
// 将所有楼层与楼层高度添加进数组
for (var i = 0; i < document.body.childNodes.length; i++) {
if (document.body.childNodes[i].nodeType == '1' && document.body.childNodes[i].className.indexOf('floor') != -1) {
floorArr.push(document.body.childNodes[i]);
floorOffsetTopArr.push(document.body.childNodes[i].offsetTop);
}
}
// 声明当前楼层,初始没有进入任何楼层
var nowFlool = NaN;
// 数组超标给楼层高度数组添加一个假楼层高度
floorOffsetTopArr.push(floorOffsetTopArr[floorOffsetTopArr.length - 1] + floorArr[floorArr.length - 1].clientHeight);
// 添加滚动监听
window.onscroll = function() {
// 获取当前卷去位置
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 判读是否进入当前楼层
for (var i = 0; i < floorOffsetTopArr.length; i++) {
if (scrollTop >= floorOffsetTopArr[i] - 200 && scrollTop < floorOffsetTopArr[i + 1] - 200) {
// 如果在当前楼层不执行DOM操作
if (nowFlool != i) {
// 如果是原楼层不存在则不执行DOM操作
!isNaN(nowFlool) && (leftBtnList[nowFlool].className = "");
nowFlool = i;
// 当前楼层添加
leftBtnList[nowFlool].className = "cur";
}
// 如果进入楼层就退出，如果没有退出就是没有在任何楼层
break;
}
}
console.log(i);
// 不在任何楼层 i == floorOffsetTopArr.length
if (i == floorOffsetTopArr.length) {
!isNaN(nowFlool) && (leftBtnList[nowFlool].className = "");
nowFlool = NaN;
}
}
// 给按钮添加监听
for (var i = 0; i < leftBtnList.length; i++) {
leftBtnList[i].index = i;
leftBtnList[i].onclick = function() {
scrollAnimate(floorOffsetTopArr[this.index], 600)
}
}
// 定义滚动动画
function scrollAnimate(target, time) {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 定义动画间隔
var interval = 10;
// 获取总帧率
var allFrame = time / interval;
// 获取总距离
var distance = target - scrollTop;
// 定义当前帧率
var currentFrame = 0;
// 定时器
var timer = setInterval(function() {
// 设置卷曲值
document.body.scrollTop = document.documentElement.scrollTop = Liear(currentFrame, scrollTop, distance, allFrame);
currentFrame++;
if (currentFrame == allFrame) {
clearInterval(timer)
}
}, interval)
}
// 随便定义一个缓动公式
function Liear(t, b, c, d) {
return t * c / d + b;
}
</script>
</body>
</html>
html中没有dic标签，应该是误写导致的。
你加的DIV
<dic class="abc"></div>
起始标签名写成了 dic
这样div的嵌套结构就乱了
改正确就好了
<div class="floor f1"></div>
<div class="floor f2">
<div class="abc"></div><div class="abc"></div><div class="abc"></div><div class="abc"></div>
</div>
<div class="floor f3"></div>
<div class="floor f4"></div>
<div class="floor f5"></div>
<div class="floor f6"></div>
<div class="floor f7"></div>
<dic class="abc"></div> 标签错误，前面是应该是div的，不是dic
找一个语法报错的IDE是真，推荐VSCode
不是div了，推荐使用hbuilderx前端编辑器，语法错误提示。
标签未统一；用带格式化和语法校验的编辑器如；vscode。
<!--例如这里添加几个div
<dic class="abc"></div>
<dic class="abc"></div>
<dic class="abc"></div>
<dic class="abc"></div>
<dic class="abc"></div>
就出现错误了-->
修改为：
<!--例如这里添加几个div
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
就出现错误了-->
标签写错了，
```html
应该是<div class="abc"></div> ，而不是<dic class="abc"></div>。
- 使用WebStorm编辑器，这类错误会自动提示给你，节省很多时间。
123行多一个 /