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

最新推荐文章于 2025-12-11 21:57:31 发布
最新推荐文章于 2025-12-11 21:57:31 发布 · 101 阅读 · 0
文章标签：

#javascript #xhtml #ViewUI

本文介绍了一种使用JavaScript实现HTML列表项隔行不同颜色显示的方法。通过为偶数行和奇数行设置不同的背景颜色，使得列表更加易于阅读。同时，还实现了鼠标悬停效果，当鼠标移过列表项时，会改变其背景颜色。

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>


netxdiy
关注
前端学习：javascript进阶
彭世瑜的博客
02-24 1373
知识点 复习 html 标签，块级 行内 css position background text-align margin padding font-size z-index over-flow :hover opacity float(clear:both) line-height ...
黑马JavaScript核心操作BOM与DOM课程笔记1-DOM
weixin_42413901的博客
04-25 868
一、Web APIs 简介 此部分的目标：能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性； 能够说出什么是 API； 能够说出什么是 Web API. 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 2. API 和 Web API 2.1 API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软
jQuery选择器实现隔行变色和使用javaScript实现隔行变色
weixin_34410662的博客
06-24 284
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;!--什么是选择器？ jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素性和行为的处理。 选择器的优势？ 与传统的...
js输出内容——document.write
joeyzc的博客
12-04 458
第一种:输出内容用""括起，直接输出""号内的内容。 document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。 第二种:通过变量，输出内容 var mystr="hello world!"; document.write(mystr); //直接写变量名，输出变量存储的内容。 第三
JavaScript小案例程序保存（完整代码+效果展示）
xubuhui的博客
11-20 1万+
1.案例——点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>换照片</title> </head> <body> <button id="btn">点我...
四、JavaScript实战（上）
qq_52289068的博客
11-21 1155
文章目录四、JavaScript实战（上）（一）Web APIs 简介（二）DOM1、获取元素1.1 根据ID获取1.2 根据标签名获取1.3 H5新增获取元素方式1.4 获取body 元素 和 获取html元素2、事件概述2.1 事件源2.2 事件类型2.3 事件处理程序2.4 执行事件的步骤3、案例：改变元素内容4、操作元素4.1 修改元素属性4.2 修改表单属性4.3 修改样式属性4.4 总结5、案例5.1 案例1：关闭二维码5.2 案例2：显示隐藏文本框的内容5.3 案例3：密码框验证信息5.4 案
JavaScript实战案例集：前端交互效果大全
JavaScript作为前端开发的核心技术之一，是实现网页交互性的关键语言。《JavaScript案例大全》这一资源集合了多个典型且实用的JavaScript应用实例，涵盖了从基础DOM操作到复杂用户交互功能的广泛内容，非常适合初学...
利用JS输出ul下li的index索引值
安小漠
03-31 1万+
打印索引
jsp页面怎么实现隔行变色
tangpeng2018的博客
04-12 7673
&lt;c:forEach var="student" items="${ students}" varStatus="status"&gt; &lt;c:if test=”${status.index % 2 == 0}”&gt; &lt;tr class = "even"&gt; --偶数行
div li隔行变色 鼠标悬浮高亮显示 jquery控制css样式
龚清林的博客
09-29 2117
$("table tr").eq(1).remove(); //删除第一行数据 $("#tbl1").find("tr").eq(0).remove(); //删除第一行数据，eq的下标是从0开始。 $("#tblContent tr:even").css("background-color", "#333"); //奇数行 $("#tblContent tr:odd
js---点击li输出当前li的索引号
wind的博客
02-12 755
1.动态添加属性的方法 <body> <ul> <li>星期1</li> <li>星期2</li> <li>星期3</li> <li>星期4</li> <li>星期5</li> </ul> </body> <script> v
利用Javascript实现隔行变色
java_zhaoyanli的专栏
03-01 2739
new document .back{ background:#005aa0; } /** * 隔行变色 */ function change(){ //1、获取 table 元素 var tbl = document.getElementById("tbl"); //2、获取 table 中的 tbody 元素 var
前端-table表格隔行变色
热门推荐
qsloony的博客
05-21 2万+
table表格隔行变色 作为一个后端的我，在某公司无前端工程师时，系统那体验自己用起来都想骂人了。今天就纪录一下，自己在后台经常用到的一个小玩意。 :nth-child(): 定义和用法 :nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式 使用:nth-child()可以表格数据看起来更加的直观，说到这我就得说说当时的情况：后
目前流行的前端框架
最新发布
zwh1zwh的博客
12-11 1399
当前前端领域的技术选型非常丰富，不同的框架和工具各有侧重。为了让你快速建立一个整体印象，下面这个表格梳理了目前最主流的几个核心框架及其关键特性。框架名称核心特点学习曲线适用场景最新动态 (2025年)​- 基于组件和虚拟DOM- 灵活的JSX语法- 丰富的生态系统中等- 大型、复杂的单页应用(SPA)- 需要高度自定义和灵活性的项目- React 19 优化并发特性和服务器组件(RSC)- 与 Next.js 深度集成​- 渐进式框架，易于集成。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值