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实现大图轮播效果
这篇文章主要为大家详细介绍了JavaScript实现大图轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
JS实现视频弹幕效果
这篇文章主要为大家详细介绍了JS实现视频弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
js获取url参数的使用扩展实例
js获取参数的具体应用，欢迎加入脚本之家交流群
2007-12-12
Bootstrap一款超好用的前端框架
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，用于开发响应式布局、移动设备优先的 WEB 项目。接下来通过本文给大家分享Bootstrap一款超好用的前端框架，感兴趣的朋友一起看看吧
2017-09-09
Javascript中Array用法实例分析
这篇文章主要介绍了Javascript中Array用法,实例分析了javascript中数组的遍历、传值、比较等常用技巧,需要的朋友可以参考下
2015-06-06
javascript调试之DOM断点调试法使用技巧分享
在开发中，偶尔会遇到类似这样的问题：页面上的一个DOM元素被改了属性，但是我们却不知道是哪个脚本更改的
2014-04-04
JS利用 React.lazy 优化页面初次渲染
这篇文章主要介绍了JS利用 React.lazy 优化页面初次渲染,React.lazy 接受一个函数，这个函数需要动态调用import()，它必须返回一个Promise，该Promise需要resolve一个default export的React组件
2022-07-07
js substring从右边获取指定长度字符串(示例代码)
本篇文章主要是对js substring从右边获取指定长度字符串的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
js实现匹配时换色的输入提示特效代码
这篇文章主要介绍了js实现匹配时换色的输入提示特效代码,涉及javascript针对页面元素的匹配及鼠标事件的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
uniapp小程序项目获取位置经纬度信息
在实际项目中很多时候我们需要获取设备的位置信息，去展示给客户，或者以位置信息为参数，继续向服务器获取一些数据，这篇文章主要介绍了uni-app如何获取位置信息(经纬度),需要的朋友可以参考下
2022-11-11

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

li隔行换色改进版

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具