dom例子七（隔行变色-显示隐藏div-超链接单选）

来源：互联网发布：手机称重量软件编辑：程序博客网时间：2024/05/21 10:55

案例十九：

注册页面，点击高级checkbox，显示高级选项，否则隐藏

<html><head><title></title><script type="text/javascript">  function toggleDiv(cb){  var div1=document.getElementById("div1");  if(cb.checked){   div1.style.display='';     }else{   div1.style.display='none';     }   }</script></head><body><input type="checkbox" id="cbshow" onclick="toggleDiv(this)"/><label for="cbshow">显示高级选项</label><div id="div1" style="display='none'">这里是一些高级选项</div></body></html>

案例二十：

表格隔行变色。

<html><head><title></title><script type="text/javascript">  function initEvent(){  var links=document.getElementsByTagName("a");  for(var i=0;i<links.length;i++){   if(i%2==0){   var link=links[i];   link.style.background="yellow";   }else{   var link=links[i];   link.style.background="red";   }  } }</script></head><body onload="initEvent()"><a href="http://www.baidu.com">百度</a><br/><a href="http://www.baidu.com">百度</a><br/><a href="http://www.baidu.com">百度</a><br/><a href="http://www.baidu.com">百度</a><br/><a href="http://www.baidu.com">百度</a><br/></body></html>

案例二十一：

超链接的单选效果，页面上三个超链接，点击一个超链接的时候
被点击的变为红色背景，未被点击的背景还原为白色

<html><head><title></title><script type="text/javascript">  function initEvent(){  var links=document.getElementsByTagName("a");  for(var i=0;i<links.length;i++){   var link=links[i];   link.onmouseover=linkClick;  } } function linkClick(){  var links=document.getElementsByTagName("a");  for(var i=0;i<links.length;i++){   var link=links[i];   link.style.background="white";   if(link=this){   link.style.background="red";   }           }  window.event.returnValue=false;  }</script></head><body onload="initEvent()"><a href="http://www.baidu.com">百度</a><br/><a href="http://www.baidu.com">百度</a><br/><a href="http://www.baidu.com">百度</a><br/><a href="http://www.baidu.com">百度</a><br/><a href="http://www.baidu.com">百度</a><br/></body></html>