JS的选项卡的问题
qq_月亮比太阳大_0
2018-07-26 22:02
<html>
<head>
<style type="text/css">
*{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>
<div id="a1">
<div id="q1" class="q1">
<ul id="qq" class="qq">
<li class="active"><a href="#">天气1</a></li>
<li><a href="#">天气2</a></li>
<li><a href="#">天气3</a></li>
<li><a href="#">天气4</a></li>
</ul>
</div>
<div id="aa" class="aa">
<p>今天天气好1111</p><br/>
<p>今天天气好</p><br/>
<p>今天天气好</p><br/>
</div>
<div id="bb" class="bb">
<p>今天天气好啊啊啊22222</p><br/>
<p>今天天气好啊啊啊</p><br/>
</div>
<div id="bb" class="bb">
<p>今天天气好33333</p><br/>
<p>今天天气好</p><br/>
<p>今天天气好</p><br/>
<p>今天天气好</p><br/>
</div>
<div id="bb" class="bb">
<p>今天天气好啊啊啊444444</p><br/>
<p>今天天气好啊啊啊</p><br/>
</div>
</div>
<script type="text/javascript">
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>
到底是那出了问题啊 求求大神指教下 啊 半个月了啊........求指教 啊 我是萌新。求大神指点 啊
0回答
还没有人回答问题，可以看看其他问题
Tab选项卡切换效果
65466 学习 · 573 问题
相似问题