li隔行换色改进版

更新时间：2008年05月13日 23:39:06 作者：

隔行换色非表格版不过原理可以参考下面的代码，写的很不错

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="PRcss,qq:50198763" />  <meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" />  <title>隔行换色 - www.jb51.net 脚本之家</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 id="nav01">  <ul>  <li>路过</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  </ul>  </div>  <div id="nav02">  <ul>  <li>无视路过</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  </ul>  </div>  <div 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需再刷新一下页面才能执行]

您可能感兴趣的文章:

一文详解JavaScript中的replace()函数
replace方法的语法是stringObj.replace(rgExp, replaceText),其中stringObj是字符串(string),下面这篇文章主要给大家介绍了关于JavaScript中replace()函数的相关资料,需要的朋友可以参考下
2023-01-01
js判断文件是否为utf-8编码的方法
使用FileReader以utf-8格式读取文件，根据文件内容是否包含乱码字符，来判断文件是否为utf-8，本文就详细的介绍一下使用，感兴趣的小伙伴们可以参考一下
2021-06-06
小程序实现密码输入框
这篇文章主要为大家详细介绍了小程序实现密码输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JS判断元素是否存在数组中的5种方式总结
数组是我们编程中经常使用的的数据结构之一,在处理数组时我们经常需要在数组中查找特定的值,下面这篇文章主要给大家总结介绍了关于JS判断元素是否存在数组中的5种方式,需要的朋友可以参考下
2023-03-03
基于JavaScript实现电子签名功能
这篇文章主要为大家详细介绍了如何通过JavaScript实现简单的电子签名功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-11-11
js方法数据验证的简单实例
下面小编就为大家带来一篇js方法数据验证的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
js和jquery判断数据类型的4种方法总结
这篇文章主要给大家介绍了关于js和jquery判断数据类型的4种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
Electron 结合 Selenium + chromedriver
这篇文章主要介绍了Electron 结合 Selenium + chromedriver 驱动服务实现浏览器多开思路详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-07-07
ES6中解构赋值实现变量批量赋值解放双手
这篇文章主要为大家介绍了ES6中解构赋值实现变量批量赋值解放双手，变量的解构赋值，听起来很复杂，简单点说可以理解成批量操作变量赋值
2022-04-04
利用JavaScript将Excel转换为JSON示例代码
这篇文章主要给大家介绍了关于利用JavaScript将Excel转换为JSON的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06

li隔行换色改进版

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具