JS+CSS实现Li列表隔行换色效果的方法

本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS+Js实现Li列表隔行换色效果</title>
</head><body>
<style>
.mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;}
.mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(/images/20110704/new_dot.gif) 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}
.mytable ul li.t1 {background-color:#EFFEDD;}
.mytable ul li.t2{background-color:#ffffff;}
.mytable ul li.t3 {background-color:#D2FCA0;}
</style>
<body style=margin:0;><br><br><br>
<div align="center">
<div class=mytable id=tab>
<ul>
<li>
<a title="JavaScript实现文字与图片拖拽效果的方法" target="_blank" href="http://www.jb51.net/article/61182.htm">
JavaScript实现文字与图片拖拽效果的方法</a></li>
<li>
<a title="jQuery实现点击图片翻页展示效果的方法" target="_blank" href="http://www.jb51.net/article/61181.htm">
jQuery实现点击图片翻页展示效果的方法</a></li>
<li>
<a title="php实现递归与无限分类的方法" target="_blank" href="http://www.jb51.net/article/61180.htm">
php实现递归与无限分类的方法</a></li>
<li>
<a title="php实现多维数组中每个单元值(数字)翻倍的方法" target="_blank" href="http://www.jb51.net/article/61179.htm">
php实现多维数组中每个单元值(数字)翻倍的方法</a></li>
<li>
<a title="php数组添加与删除单元的常用函数实例分析" target="_blank" href="http://www.jb51.net/article/61178.htm">
php数组添加与删除单元的常用函数实例分析</a></li>
<li>
<a title="JS+CSS实现可拖动的弹出提示框" target="_blank" href="http://www.jb51.net/article/61177.htm">
JS+CSS实现可拖动的弹出提示框</a></li>
<li>
<a title="js实现下拉框选择要显示图片的方法" target="_blank" href="http://www.jb51.net/article/61176.htm">
js实现下拉框选择要显示图片的方法</a></li>
<li>
<a title="js实现点击图片将图片地址复制到粘贴板的方法" target="_blank" href="http://www.jb51.net/article/61175.htm">
js实现点击图片将图片地址复制到粘贴板的方法</a></li>
</ul></div><script type="text/javascript">
<!--
var Ptr=document.getElementById("tab").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>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript 隔行换色函数代码

    先定义两个关于背景色的样式tag为id对象c1为样式1c2为样式2 复制代码 代码如下: <script> function changeRowsBg(tag,c1,c2) { var i = 0; var obj_tag = document.getElementsByTagName(tag); for(i = 0;i < obj_tag.length ;i++){ (i%2 == 0)? obj_tag(i).className = c1 : obj_tag(i).className

  • JS实现隔行换色的表格排序

    1.获取元素    2.获取数据   3.绑定数据   4.隔行换色   5.表格排序 <table cellpadding="0" cellspacing="0" id="tab"> <thead> <tr> <th class="cursor">姓名</th> <th class="cursor">年龄</th> <

  • 原生javascript实现隔行换色

    js让我们一起从基础来学习,我们一点一点的来学习 下边是我写的代码,然后大家看着学习下吧!!! 复制代码 代码如下: <html> <head> <title>js演示</title> </head> <body> <script> document.write('<table border="1" width="100px" align="center"&

  • js实现表格字段排序

    1.比较函数生成器: 复制代码 代码如下: /** * 比较函数生成器 *  * @param iCol *            数据行数 * @param sDataType *            该行的数据类型 * @return */function  generateCompareTRs(iCol, sDataType) {     return   function  compareTRs(oTR1, oTR2) {        vValue1 = convert(oTR1.c

  • 使用JavaScript和CSS实现文本隔行换色的方法

    使用JavaScript和CSS实现文本隔行换色的方法

    先来看一个简单的方法. 在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色.在网页加载后通过 javascript 获取要变色的标签列表,执行如下代码: // 当文件加载时,执行代码. window.onload = function() { // 获取<ul id="list" />对象 var list = document.getElementById('list'); // 获取list下面的所有li va

  • Js 实现表格隔行换色一例

    Js实现表格隔行换色一例 body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:

  • 不用javascript实现带序号的表格隔行换色的效果

    .test{ border:1px solid #000; color:#333; font:12px; } .test ol li{ padding-left:5px; background-color:expression(this.sourceIndex%2? '#efefef':'#fefefe'); } 观自在菩萨 行深般若波罗密多时 照见五蕴皆空 度一切苦厄 舍利子 色不异空 空不异色 色既是空 空既是色 受想行识 亦复如是 舍利子 是诸法空相 不生不灭 不垢不净 不增不减 是故空中

  • JS实现简洁(隔行换色、高亮显示)表格特效

    JS实现的表格 document.write(' '); var i=0; while(i') } document.write(' '+i+' '); i++; //document.write(' '); } if(i%10==0){ document.write(' '); } document.write(' '); var ys=null; function show(obj){ ys=obj.bgColor; obj.bgColor="red"; } function no

  • 33种Javascript 表格排序控件收集

    33种Javascript 表格排序控件收集

    1. jQuery tablesorter http://tablesorter.com/docs/ 2. Table sorting with Prototype http://tetlaw.id.au/view/blog/table-sorting-with-prototype/ 3. Sorttable http://www.kryogenix.org/code/browser/sorttable/ 4. Table Sorting Javascript http://yoast.com/

  • jquery tablesorter.js 支持中文表格排序改进

    代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序. 没办法,能力有限,只能... 复制代码 代码如下: //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return p

  • javascript 表格排序和表头浮动效果(扩展SortTable)

    一.SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add <script src="sorttable.js"></script> to your HTML Add class="sortable"

随机推荐