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

本文链接：https://blog.csdn.net/xiaoxiqinqinbaobao/article/details/7650096

案例十九：

注册页面，点击高级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" οnclick="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 οnlοad="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.οnmοuseοver=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 οnlοad="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>