您的位置: 首页 > 软件教程 > Dreamweaver实例教程专题 > Dreamweaver表格以及列表隔行换色的js效果

Dreamweaver表格以及列表隔行换色的js效果

8.4分
出处:网络 时间:2011-07-06

您可能感兴趣的话题: Dreamweaver  

核心提示:Dreamweaver表格以及列表隔行换色的js效果

  <!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">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>表格隔行换色</title>
  <style type="text/css" media="screen">
  <!-- /* PR-<a class="channel_keylink" href="http://webdesign.chinaitlab.com/List_1367.html" target="_blank">CSS</a> */
  table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
  table td {border:solid #999;border-width:0 1px 1px 0;}
  .t1 {background-color:#fff;}/* 第一行的背景色 */
  .t2 {background-color:#eee;}/* 第二行的背景色 */
  .t3 {background-color:#ccc;}/* 鼠标经过时的背景色 */
  -->
  </style>
  </head>
  <body>
  <ul><li>11111111</li>
  <li>222222222</li>
  <li>3333333</li>
  <li>444444444</li>
  </ul>
  <script type="text/javascript">
  <!--
  var Ptr=document.getElementsByTagName("li");
  function $() {
  for (i=1;i<Ptr.length+1;i++) {
  Ptr[i-1].className = (i%2>0)?"t1":"t2";
  }
  }
  window.onload=$;
  for(var i=0;i<Ptr.length;i++) {
  Ptr[i].onmouseover=function(){
  this.tmpClass=this.className;
  this.className = "t3";
  
  };
  Ptr[i].onmouseout=function(){
  this.className=this.tmpClass;
  };
  }
  //-->
  </script>
  </body>
  </html>
网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
HTML的中文叫做“超文本标记语言”。是用来... [详细]
JavaScript是基于对象和事件驱动并具... [详细]