JS实现的简单的div切换显示

★效果如下

即通过li空间的事件监控实现相关div的显示和影藏，实现div的动态显示。图 1对应人气收藏，图2对应最受欢迎，这只是分开截图。

 图 1

图 2

说明：

html 和css 代码不做说明，主要附上了js的代码

1.相关的思路就是利用dom获取li控件和div控件，div的display设置为none；当lI的onmouseover事件触发时改变div的display状态从而实现动态切换显示。当然，此时html和css部分控制的相应div应该是具有相同属性的，即切换的div的位置，大小，颜色等属性相同。

对应代码：//变量区 和 //相关函数

2.然后就是为li添加监控事件，本代码的li由于是float:right，所以默认的选择li设置为oCommendLi[2]而不是oCommendLi[0]，就是从 左数和从右数的关系，自己体会吧。

对应代码：//控件加载监听

 //变量区
var oCommendDiv=document.getElementById("reader_commend");
var oCommendLi=oCommendDiv.getElementsByTagName("li");
var oCommendBookDiv=oCommendDiv.getElementsByTagName("div");

//相关函数
function commendbook_none(){
  for(var i=0;i<oCommendLi.length;i++)
  {
      oCommendLi[i].firstChild.style.border="";
          oCommendLi[i].firstChild.style.borderRadius="";
  }
  for(var i=0;i<oCommendBookDiv.length;i++)
  {
    oCommendBookDiv[i].style.display="none";
  }  
}
function commendbook_show(obj1,obj2){
    obj1.οnmοuseοver=function(){
      commendbook_none();
      obj1.firstChild.style.border="2px solid #2B6D33";
      obj1.firstChild.style.borderRadius="2px 20px 2px 20px";
      obj2.style.display="block";
  }
}
//控件加载监听
window.οnlοad=function(){
  for(var i=0;i<oCommendLi.length;i++)
  {
    commendbook_show(oCommendLi[i],oCommendBookDiv[i]);
  }
  oCommendLi[2].firstChild.style.border="2px solid #2B6D33";
  oCommendLi[2].firstChild.style.borderRadius="2px 20px 2px 20px";
  oCommendBookDiv[2].style.display="block";
 }
}