`
netxdiy
  • 浏览: 711907 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript实现的LI列表输出,隔行同色的代码

 
阅读更多

javascript实现的LI列表输出,隔行同色的代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>the9web.com</title>
</head><body>
<style>......
.mytable
{...}{...}{...}{border-collapse:collapse;border:solid#6AA70B;border-width:0px000px;width:50%;}
.mytableulli
{...}{...}{...}{padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif)3px50%no-repeat;border-bottom:#6AA70B1pxdotted;font-family:"Verdana,宋体";font-size:12px;color:#008000;text-align:left;height:25px;}
.mytableulli.t1
{...}{...}{...}{background-color:#EFFEDD;}/**//**//**//*第一行的背景色*/
.mytableulli.t2
{...}{...}{...}{background-color:#ffffff;}/**//**//**//*第二行的背景色*/
.mytableulli.t3
{...}{...}{...}{background-color:#D2FCA0;}/**//**//**//*鼠标经过时的背景色*/
</style>
<bodystyle=margin:0;>
<divalign="center">
<divclass=mytableid=tab>
<ul>
<li><ahref="http://the9web.com">这个是第1行的文字,大家看清楚了</a></li>
<li><ahref="http://the9web.com">这个是第2行的文字,大家看清楚了</a></li>
<li><ahref="http://the9web.com">这个是第3行的文字,大家看清楚了</a></li>
<li><ahref="http://the9web.com">这个是第4行的文字,大家看清楚了</a></li>
<li><ahref="http://the9web.com">这个是第5行的文字,大家看清楚了</a></li>
<li><ahref="http://the9web.com">这个是第6行的文字,大家看清楚了</a></li>
<li><ahref="http://the9web.com">这个是第7行的文字,大家看清楚了</a></li>
<li><ahref="http://the9web.com">这个是第8行的文字,大家看清楚了</a></li>
<li><ahref="http://the9web.com">这个是第9行的文字,大家看清楚了</a></li>
</ul></div><scripttype="text/javascript">......
<!--
varPtr=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(vari=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>


分享到:
评论

相关推荐

    CSS结合JavaScript 实现Li隔行换色 代码

    本文将通过分析一份具体的代码示例,来详细介绍如何使用CSS和JavaScript结合的方式实现列表项(`&lt;li&gt;`)的隔行换色效果。 #### 二、技术原理 实现列表项隔行换色的效果主要涉及两个方面的技术:CSS和JavaScript。...

    用javascript实现li 列表数据隔行变换背景颜色

    这里我们将详细讨论如何使用JavaScript实现`li`列表数据隔行变换背景颜色。 首先,我们需要创建HTML结构,通常包含一个`&lt;ul&gt;`元素和多个`&lt;li&gt;`元素。在这个例子中,我们有一个id为`list01`的`&lt;ul&gt;`元素,并预定义了...

    jquery 实现隔行换色

    此外,还可以使用CSS3的`:nth-child()`选择器来简化代码,直接在CSS中实现隔行换色,而不需要依赖jQuery: ```css table tbody tr:nth-child(2n) { background-color: #f5f5f5; } table tbody tr:nth-child(2n+1)...

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

    本篇将介绍如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 实现 `li` 列表元素的隔行换色效果。首先,我们需要理解 CSS 的基本样式设置以及 JavaScript 如何操作 DOM(文档对象模型)中的元素。 1. **...

    网页里面表格隔行变色代码

    在本案例中,"网页里面表格隔行变色代码" 描述了一种实现表格隔行变色的方法,包括奇偶数行的变色以及点击变色的效果。 首先,我们来了解如何实现基础的表格隔行变色。在HTML中,`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`...

    实现表格隔行换色效果.rar

    在这个案例中,`index.htm`可能包含一个初始的表格结构,而`说明.htm`则可能提供实现隔行换色的JS代码。 在JavaScript中,我们可以监听表格的`DOMSubtreeModified`事件,当表格内容改变时触发相应的函数。这个函数...

    javascript 隔行换色函数代码

    这种效果在JavaScript中可以很容易实现,而不需要依赖CSS样式,利用JavaScript动态地给元素添加类名来改变背景色,从而实现隔行换色的效果。 在上述的代码片段中,我们首先定义了一个函数changeRowsBg,这个函数的...

    codeAjax选项卡、隔行换色、弹出层

    在IT领域,网页开发是不可或缺的一部分,而"codeAjax选项卡、隔行换色、弹出层"这三个概念都是网页动态交互设计中的重要元素。让我们分别深入探讨它们的原理和应用。 首先,codeAjax选项卡是一种常见的用户界面设计...

    JavaScript实现99乘法表及隔行变色实例代码

    JavaScript实现99乘法表及隔行变色实例代码的知识点涉及到了HTML基础、JavaScript编程基础以及CSS样式应用。以下将详细介绍这些知识点: 1. HTML和JavaScript的结合使用: 本文的项目要求是在页面中输出99乘法表,...

    Gridview隔行换色

    在给定的部分内容中,展示了实现GridView隔行换色的具体JavaScript代码。下面对这段代码进行详细解析: ```javascript window.onload = function() { GridViewColor("&lt;%=GridView.ClientID%&gt;", "#fff", "#eee", "#...

    jquery选取商品隔行变色

    在网页设计中,为了提升用户体验和视觉效果,我们经常需要对数据列表进行美化处理,比如隔行变色。"jQuery选取商品隔行变色"是一个常见的网页交互功能,主要用于电商网站的商品列表展示,使得用户在浏览长列表时能更...

    前端JavaScript隔行换色

    前端小白入门案例使用Hbuilder国产开发工具引用jQuery库实现表格隔行换色基本功能。简化DOM操作 代码的功能如下: 1.通过选择器获取表格的表头对象(thead tr),并设置其背景颜色为navajowhite。 2.通过选择器获取...

    教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色

    在本篇教程中,我们将深入探讨如何利用JavaScript高效地完成后台数据在HTML表格中的展示,并实现隔行换色的效果,让数据更清晰易读。JavaScript作为客户端编程的重要语言,其在网页动态效果和用户交互方面的功能强大...

    基于JavaScript实现的程序员表白爱心代码(2套)

    基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...

    li隔行换色改进版

    这段代码的核心是使用JavaScript和CSS来实现li元素的隔行换色和鼠标悬停交互效果。在实际应用中,CSS样式可以通过CSS文件引入,而JavaScript可以放在外部文件中,以保持代码的分离和可维护性。此外,为了在不同...

    jquery实现表格隔行换色和鼠标经过提示效果源码

    本篇将详细介绍如何使用jQuery实现表格隔行换色以及鼠标经过时显示提示效果。 首先,我们需要理解jQuery的基本用法。jQuery通过选择器(如`$("#id")`、`$(".class")`或`$("tag")`)找到页面中的元素,然后对这些...

    JavaScript实现轮播特效(代码)

    JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播...

    隔行颜色不同、隔行颜色不同

    在网页设计中,隔行颜色不同的效果通常是为了增强表格或者列表的可读性,使得用户在浏览长列表时能更容易区分每一行的信息。这个效果主要通过CSS(层叠样式表)来实现,同时结合jQuery(一种JavaScript库)进行动态...

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    原生JavaScript实现表格隔行变色通常涉及到以下步骤: 1. 通过`document.getElementsByTagName('tr')`获取页面中所有的`&lt;tr&gt;`元素。 2. 使用for循环遍历获取到的元素数组。 3. 在循环中通过判断当前元素的索引值,...

Global site tag (gtag.js) - Google Analytics