li隔行換色改進版

2019-11-21 01:45:07

字體：大中小

來源：轉載

供稿：網友

ghhs("nav01","li"); // 鼠標經過時變色
ghhs("nav02","li","no"); // 只隔行換色
ghhs("nav03","li","onclick"); // 鼠標點擊當前標記變色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="keywords" content="PRcss,xhtml,html,css,js,book,個人主頁,無聊,神經,懶惰" />  <meta name="description" content="PRcss的個人主頁,無聊的,神經的,懶惰的..." />  <meta name="author" content="http://m.survivalescaperooms.com/"/>  <meta name="Copyright" content="本頁版權歸PRcss所有。All Rights Reserved" />  <title>隔行換色 - m.survivalescaperooms.com 武林網</title>  <script type="text/javascript">  // 返回Id、Tag  function Pid(id,tag){  if(!tag){return document.getElementById(id);}  else{return document.getElementById(id).getElementsByTagName(tag);}  }  // 隔行換色  function ghhs(id,tag,s) {      var line=Pid(id,tag);      for (var i=1;i<line.length+1;i++) {           line[i-1].className=(i%2>0)?"t1":"t2";       }      if(s=="no"){          return;      }      else if(!s){          for(var i=0;i<line.length;i++) {              line[i].onmouseover=function(){                  this.tmpClass=this.className;                  this.className+=" up";              }              line[i].onmouseout=function(){                  this.className=this.tmpClass;              }          }      }      else{          for(var i=0;i<line.length;i++) {              line[i].tmep=i;              line[i][s]=function(){                  ghhs_tab(this.tmep);              }          }      }      function ghhs_tab(s){          for(var i=0;i<line.length;i++){              if(!line[i].tmpClass){                  line[i].tmpClass=line[i].className+=" pr1984_com";              }              if(s==i){                  line[i].className+=" up";              }              else {                  line[i].className=line[i].tmpClass;              }          }      }  }  </script>  <style type="text/css">  .t1 {background:#eee;}  .t2 {background:#fff;}  .up {background:#ddd;}  </style>  </head>  <body>  <div   class="iwvjtn8m0"   id="nav01">  <ul>  <li>路過</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  </ul>  </div>  <div   class="iwvjtn8m0"   id="nav02">  <ul>  <li>無視路過</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  </ul>  </div>  <div   class="iwvjtn8m0"   id="nav03">  <ul>  <li>踩我</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  </ul>  </div>  <script type="text/javascript">  ghhs("nav01","li");  ghhs("nav02","li","no");  ghhs("nav03","li","onclick");  </script>  </body>  </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：彈出提示的效果代碼

下一篇：li隔行換色效果代碼升級版