JS选项卡求救啊-慕课网

首页课程实战体系课手记专栏慕课教程

JS选项卡求救啊

来源：10-1 编程挑战

qq_月亮比太阳大_0

2018-07-27 20:28

<html>

<head>

*{padding:0px;margin:0px}

#a1{height:400px;width:400px;border:2px solid red;background:yellow}

li{list-style:none}

a{text-decoration:none}

#q1 li{width:40px;height:35px;line-height:35px;text-align:center;float:left;margin-right:3px;background:#7e9fcd;

padding:0 5px 0 5px;color:#303538}

#q1 li a:hover{color:#de4a3f;font-weight:bold}

#aa{position:absolute;top:37px;left:0px;background-color:#437200;height:250px;width:190px;}

#bb{position:absolute;top:37px;background-color:#c962a7;height:250px;width:190px;display:none}

</style>

</head>

<body>

</ul>

</div>

<p>今天天气好1111</p><br/>

<p>今天天气好</p><br/>

</div>

<p>今天天气好啊啊啊22222</p><br/>

<p>今天天气好啊啊啊</p><br/>

</div>

<p>今天天气好33333</p><br/>

<p>今天天气好</p><br/>

</div>

<p>今天天气好啊啊啊444444</p><br/>

<p>今天天气好啊啊啊</p><br/>

</div>

window.onload = function(){

var f1=document.getElementById("qq");

var f2=f1.getElementsByTagName("li");

var f3=document.getElementById("a1");

var f4=f3.getElementsByTagName("div");

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

f2[i].index=i;

f2[i].onmouseover = function(){

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

f2[i].className= "";

}

this.className = "active";

for(var j=0;j<f4.length;j++){

f4[j].className="bb";

}

f4[this.index].className="aa";

}

</script>

</body>

</html>

到底是那出了问题啊求求大神指教下啊半个月了啊........求指教啊我是萌新。求大神指点啊；到底是那出了问题，希望大神指点一下问题出在什么地方

写回答关注

1回答

慕雪0993066

2018-07-28 16:09:43

兄弟我看了半天不得不说真乱，你再自己看一下啊 active 这个类名在css里面都没有。就this.this.className = "active";
var f3=document.getElementById("a1");
var f4=f3.getElementsByTagName("div");
还有这个你看一下 f3里面有多少个div ，
最后一行的 this.index 在前面先声明一下 f2[i].index=i

2 0

风起临冬

你的最后一句话，是否可以换成xxx.indexOf（this）

2018-08-06 13:42:03

共 2 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468727 学习 · 22064 问题

查看课程

相似问题

js 实现选项卡切换

回答 1

JS选项卡中为什么要index？

回答 2

js编程挑战，选项卡切换效果。

回答 2

tab选项卡

回答 2

4行JS代码实现选项卡，带注释详解

回答 1

打开慕课网App查看更多内容