问答详情
源自:10-1 编程挑战

请问我的这个选项卡为啥没效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

img{position:relative; left:90px;}
li{
	float: left;
	list-style-type: none;
	margin-right: 1px;
	margin-bottom:1px;
	background-color: #066;
	font-size: larger;
	display:block;
	width:100px;
	height:37px;
	padding-left:0;
	
}
.clicked{
	background-color: #6A861F;
}
.on{display:block;}
.off{display:none;}

</style>
<script type="text/javascript">
 window.onload=function()
{
	var a=document.getElementsByName("nav");
	var b=document.getElementsByName("content");
	for(var i=0;i<a.length;i++)
	{
		a[i].index=i;
		a[i].onclick=function()
		 {
			
			 for(var k=0;k<a.length;k++)
			 {
				 b[i].className="off";
				 a[i].className="";
			 }
				 b[this.index].className="on";
				 this.className="clicked";
			 
		 }
	}
	
}


    

</script>
</head>

<body>

<div  id="nav">
<ul>
<li name="nav">七律长征</li>
<li name="nav">湘江战役</li>
<li name="nav">遵义会议</li>
<li name="nav">飞夺泸定桥</li>
<li name="nav">强攻腊子口</li><br>
</ul>
</div>
<div id="wrap">
 <div name="content" class="on">内容1</div>
 <div name="content" class="off">内容2</div>
 <div name="content" class="off">内容3</div>
 <div name="content" class="off">内容4</div>
 <div name="content" class="off">内容5</div>
 
</div>
</body>
</html>


提问者:Molisan 2016-11-27 23:56

个回答

  • stone310
    2016-11-28 07:03:51
    已采纳

    for(var k=0;k<a.length;k++)
    {
        b[k].className="off"; //i改成k
        a[k].className="";    //i改成k
    }