你的位置:首页 > 网页设计

[网页设计]JS产品分类列表练习


CSS:

*{padding: 0;margin: 0;}  ul,li{list-style: none;}  body{color: #666;background: #f5f5f5;}  a{text-decoration: none;color: #666;}  .cont{    width: 400px;    margin: 30px auto;    position: relative;    background: #fff;    box-shadow: 2px 2px 5px #e6e2e2;  }  .tit_1,.tit_2,.tit_3,.tit_4{/*分类标题样式*/    height: 44px;    line-height: 44px;    position: relative;    padding-left: 40px;  }  .tit_1:before{/*标题部分的小三角形*/    content: '';    position: absolute;    left: 15px;    top: 12px;    border:10px solid transparent;    border-left-color:#ccc;  }  .tit_2:before{/*标题部分的小三角形*/    content: '';    position: absolute;    left: 15px;    top: 12px;    border:10px solid transparent;    border-left-color:#fff;  }    .tit_3:before{/*标题部分的小三角形*/    content: '';    position: absolute;    left: 15px;    top: 17px;    border:10px solid transparent;    border-top-color:#ccc;  }  .tit_4:before{/*标题部分的小三角形*/    content: '';    position: absolute;    left: 15px;    top: 17px;    border:10px solid transparent;    border-top-color:#fff;  }  .active{/*列表内容的样式*/    height: 28px;    line-height: 28px;    padding-left: 40px;    cursor: pointer;  }  #ul1{    padding: 20px 0;  }    .hidden{/*隐藏列表内容*/    display: none;  }  .on{/*显示列表内容*/    display: block;  }

HTML:

<div class="cont">  <ul id="ul1">    <li>      <h3 class="tit_1">护肤用品</h3>      <ul class="hidden">        <li>面部卸妆</li>        <li>眼部护理</li>        <li>卸妆油</li>        <li>卸妆棉</li>      </ul>    </li>    <li>      <h3 class="tit_1">彩妆香水</h3>      <ul class="hidden">        <li>隔离霜</li>        <li>BB霜</li>        <li>粉底液</li>        <li>腮红</li>        <li>唇彩</li>      </ul>    </li>    <li>      <h3 class="tit_1">个人护理</h3>      <ul class="hidden">        <li>头发护理</li>        <li>洗发水</li>        <li>发膜</li>        <li>焗油</li>        <li>护发素</li>      </ul>    </li>    <li>      <h3 class="tit_1">香水香氛</h3>      <ul class="hidden">        <li>女士香水</li>        <li>淡香水</li>        <li浓香水</li>        <li>男士香水</li>        <li>古龙香水</li>        <li>运动香水</li>      </ul>    </li>  </ul></div>

JS:

<script type="text/javascript">  var oUl=document.getElementById('ul1');  var aUl=oUl.getElementsByTagName('ul');  var aH=oUl.getElementsByTagName('h3');  var aLi=null;  var len=aUl.length;  for (var i = 0; i <len; i++) {    aLi=aUl[i].getElementsByTagName('li');    for (var j = 0; j < aLi.length; j++) {      aLi[j].className='active';      aLi[j].onmouseover=function(){        //鼠标经过当前li,文字颜色发生变化        this.style.color='#e4007e';/*alert(4);*/      }      aLi[j].onmouseout=function(){        //鼠标离开当前li,文字颜色恢复原样        this.style.color='#666';      }    };  };  for (var i = 0; i < aH.length; i++) {    aH[i].index=i;    //鼠标经过当前h3时,背景色、字体颜色改变    aH[i].onmouseover=function(){      this.style.backgroundColor='#e4007e';      this.style.color='#fff';      //判断当前列表li下的内容是否展开      if (aUl[this.index].className=='hidden') {        this.className='tit_2';//列表内容隐藏时,小三角形的样式tit_2      }      else{        this.className='tit_4';//列表内容展开时,小三角形的样式tit_4      };    }    aH[i].onmouseout=function(){      this.style.backgroundColor='#fff';      this.style.color='#666';      //判断当前列表li下的内容是否展开      if (aUl[this.index].className=='hidden') {        this.className='tit_1';//列表内容展开时,小三角形的样式tit_1      }      else{        this.className='tit_3';//列表内容展开时,小三角形的样式tit_3      };    }    aH[i].onclick=function(){      //点击当前h3,如果列表下的内容隐藏,则将其显示出来,否则隐藏起来      if (aUl[this.index].className=='hidden') {        aUl[this.index].className='on';        this.className='tit_4';      }      else{        aUl[this.index].className='hidden';        this.className='tit_2';      };    }    /*alert(1);*/  };</script>