li隔行換色改進版

更新時間：2008年05月13日 23:39:06 作者：

隔行換色非表格版不過原理可以參考下面的代碼，寫的很不錯

ghhs("nav01","li"); // 鼠標經(jīng)過時變色
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,個人主頁,無聊,神經(jīng),懶惰" />  <meta name="description" content="PRcss的個人主頁,無聊的,神經(jīng)的,懶惰的..." />  <meta name="Author" content="PRcss,qq:50198763" />  <meta name="Copyright" content="本頁版權(quán)歸PRcss所有。All Rights Reserved" />  <title>隔行換色 - www.dhdzp.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="vfmylsp"   id="nav01">  <ul>  <li>路過</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  </ul>  </div>  <div   class="2qx7ov7"   id="nav02">  <ul>  <li>無視路過</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  </ul>  </div>  <div   class="8pb7x2g"   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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

一文詳解JavaScript中的replace()函數(shù)
replace方法的語法是stringObj.replace(rgExp, replaceText),其中stringObj是字符串(string),下面這篇文章主要給大家介紹了關(guān)于JavaScript中replace()函數(shù)的相關(guān)資料,需要的朋友可以參考下
2023-01-01
js判斷文件是否為utf-8編碼的方法
使用FileReader以utf-8格式讀取文件，根據(jù)文件內(nèi)容是否包含亂碼字符，來判斷文件是否為utf-8，本文就詳細的介紹一下使用，感興趣的小伙伴們可以參考一下
2021-06-06
小程序?qū)崿F(xiàn)密碼輸入框
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)密碼輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
JS判斷元素是否存在數(shù)組中的5種方式總結(jié)
數(shù)組是我們編程中經(jīng)常使用的的數(shù)據(jù)結(jié)構(gòu)之一,在處理數(shù)組時我們經(jīng)常需要在數(shù)組中查找特定的值,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JS判斷元素是否存在數(shù)組中的5種方式,需要的朋友可以參考下
2023-03-03
基于JavaScript實現(xiàn)電子簽名功能
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)簡單的電子簽名功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-11-11
js方法數(shù)據(jù)驗證的簡單實例
下面小編就為大家?guī)硪黄猨s方法數(shù)據(jù)驗證的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
js和jquery判斷數(shù)據(jù)類型的4種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于js和jquery判斷數(shù)據(jù)類型的4種方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
Electron 結(jié)合 Selenium + chromedriver
這篇文章主要介紹了Electron 結(jié)合 Selenium + chromedriver 驅(qū)動服務(wù)實現(xiàn)瀏覽器多開思路詳解,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-07-07
ES6中解構(gòu)賦值實現(xiàn)變量批量賦值解放雙手
這篇文章主要為大家介紹了ES6中解構(gòu)賦值實現(xiàn)變量批量賦值解放雙手，變量的解構(gòu)賦值，聽起來很復(fù)雜，簡單點說可以理解成批量操作變量賦值
2022-04-04
利用JavaScript將Excel轉(zhuǎn)換為JSON示例代碼
這篇文章主要給大家介紹了關(guān)于利用JavaScript將Excel轉(zhuǎn)換為JSON的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06