小弟自学的前端，目前学到js部分，今天写了一个小东西，就tab切换，写完了发现有问题，但是一直找不出来，浏览器检查也没看出来，一点鼠标就卡住，只好求大佬们帮小弟看下，谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
.tab{
width: 300px;
height: 350px;
box-sizing: border-box;
margin: 50px auto;
}
.header{
width: 300px;
height: 50px;
background-color: gray;
box-sizing: border-box;
display:flex; /* 水平平分布局 */
}
.header span{
background-color: pink;
border: 1px solid black;
flex: 1;
line-height:50px;
text-align: center;
margin-left: 10px;
cursor: pointer;
}
span:first-child{
margin-left: 0px; /* 第一个span不加左边距 */
}
.content{
width: 300px;
height: 300px;
position: relative;
}
.content li{
width: 300px;
height: 300px;
top: 0;
left: 0;
position: absolute;
}
.content ul{
margin: 0;
list-style: none;
}
.content li{
display: none;
}
.header span.current {
background-color: skyblue;
}
.content li.current {
display: block;
background-color: skyblue;
}
</style>
<body>
<div class="tab" id="box">
<div class="header">
<span>娱乐</span>
<span class="current">新闻</span>
<span>科技</span>
</div>
<div class="content">
<ul>
<li>娱乐八卦</li>
<li class="current">最新新闻</li>
<li>科技前沿</li>
</ul>
</div>
</div>
<script>
var box=document.getElementById("box");
var hd=box.getElementsByTagName("div")[0];
var bd=box.getElementsByTagName("div")[1];
var sp=hd.getElementsByTagName("span");
var list=bd.getElementsByTagName("li");
for (var i = 0;i<sp.length;i++) {
sp[i].setAttribute("index",i);
sp[i].onclick=function(){
for (var j = 0;j<sp.length;i++) {
sp[j].removeAttribute("class");
}
this.className="current";
var n=this.getAttribute("index");
for (var k = 0; k<list.length;k++) {
list[k].removeAttribute("class");
}
list[n].className=("current");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
.tab{
width: 300px;
height: 350px;
box-sizing: border-box;
margin: 50px auto;
}
.header{
width: 300px;
height: 50px;
background-color: gray;
box-sizing: border-box;
display:flex; /* 水平平分布局 */
}
.header span{
background-color: pink;
border: 1px solid black;
flex: 1;
line-height:50px;
text-align: center;
margin-left: 10px;
cursor: pointer;
}
span:first-child{
margin-left: 0px; /* 第一个span不加左边距 */
}
.content{
width: 300px;
height: 300px;
position: relative;
}
.content li{
width: 300px;
height: 300px;
top: 0;
left: 0;
position: absolute;
}
.content ul{
margin: 0;
list-style: none;
}
.content li{
display: none;
}
.header span.current {
background-color: skyblue;
}
.content li.current {
display: block;
background-color: skyblue;
}
</style>
<body>
<div class="tab" id="box">
<div class="header">
<span>娱乐</span>
<span class="current">新闻</span>
<span>科技</span>
</div>
<div class="content">
<ul>
<li>娱乐八卦</li>
<li class="current">最新新闻</li>
<li>科技前沿</li>
</ul>
</div>
</div>
<script>
var box=document.getElementById("box");
var hd=box.getElementsByTagName("div")[0];
var bd=box.getElementsByTagName("div")[1];
var sp=hd.getElementsByTagName("span");
var list=bd.getElementsByTagName("li");
for (var i = 0;i<sp.length;i++) {
sp[i].setAttribute("index",i);
sp[i].onclick=function(){
for (var j = 0;j<sp.length;i++) {
sp[j].removeAttribute("class");
}
this.className="current";
var n=this.getAttribute("index");
for (var k = 0; k<list.length;k++) {
list[k].removeAttribute("class");
}
list[n].className=("current");
}
}
</script>
</body>
</html>
