来个大神！~

<!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>
ul,h2 { margin:0; padding:0;}
li { list-style:none;}
#list { width:400px; margin:0 auto; border:1px solid #000;}
#lis { width:400px; }
ul h2 { height:30px; line-height:30px; font-size:16px; background:url(img/ico1.gif) 10px center no-repeat; padding-left:30px; background-color:#69F; cursor:pointer;}
.active { background:url(img/ico2.gif) 10px center no-repeat; background-color:#FF9; }
ul ul { text-indent:2em; display:none;}
ul ul li { border-bottom:1px solid #000; height:30px; line-height:30px; cursor:pointer;}
.hover { background:#F09;}
</style>
<script>
window.onload=function () {
   var oList=document.getElementById("list");
   var aH2=oList.getElementsByTagName("h2");
   var aUl=oList.getElementsByTagName("ul");
   var arrLi=[];
   var oldLi=null;

   for (var i=0; i<aH2.length;i++) {
       aH2[i].index=i;
       aH2[i].onOff=true;
       aH2[i].onclick=function () {
           for (var i=0; i<aH2.length;i++) {
           aUl[i].style.display="none";
           aH2[i].style.className="";
           console.log(aH2[i]);
           }
           if (this.onOff==true) {
           aUl[this.index].style.display="block";
           this.className="active";
           console.log(this);
           this.onOff=false;
           }
           else {
           aUl[this.index].style.display="none";
           this.className="";
           this.onOff=true;
               }
           }
       }

   for (var i=0; i<aUl.length; i++) {
       aLi=aUl[i].getElementsByTagName("li");
       for (var j=0; j<aLi.length; j++) {
       arrLi.push(aLi[j]);
           }
       }


   for (var i=0; i<arrLi.length; i++) {
       arrLi[i].onOff=true;
       arrLi[i].onclick=function () {
       for (var i=0; i<arrLi.length; i++) {
           arrLi[i].className="";
           }
       if (this.onOff==true) {
           this.className="hover";
           this.onOff=false;
           }
           else {
           this.className="";
           this.onOff=true;
               }
           }
       }
}
</script>
</head>

<body>
<ul id="list">
   <li id="lis">
       <h2>我的好友</h2>
        <ul>
           <li>张三</li>
           <li>李四</li>
           <li>王二</li>
           <li>苏晓</li>
        </ul>
    </li>
   <li class="lis">
       <h2>我的坏友</h2>
        <ul>
           <li>张小三</li>
           <li>李小四</li>
           <li>王小二</li>
           <li>苏小晓</li>
        </ul>
    </li>
   <li class="lis">
       <h2>我的黑名单</h2>
        <ul>
           <li>张一</li>
           <li>李四</li>
           <li>王三</li>
           <li>苏小</li>
        </ul>
    </li>
</ul>

</body>
</html>

aH2[i].style.className="";
来个大神告诉我这个为什么没有用！！

qq_已是回忆为何要苦苦追寻_03352366

浏览 1183回答 2

2回答

摩诃迦叶

aH2[i].style.className="";style 和 className都是标签的属性。 aH2[i].className="";改成这样试试

0 0

随时随地看视频慕课网APP