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";
 }
}




评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值