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

最新推荐文章于 2025-09-09 16:55:30 发布
最新推荐文章于 2025-09-09 16:55:30 发布
阅读量94 收藏
点赞数
文章标签： 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 1261
知识点 复习 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 849
一、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 271
&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 442
第一种:输出内容用""括起，直接输出""号内的内容。 document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。 第二种:通过变量，输出内容 var mystr="hello world!"; document.write(mystr); //直接写变量名，输出变量存储的内容。 第三
利用JS输出ul下li的index索引值
安小漠
03-31 1万+
打印索引
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 1141
文章目录四、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 案
JS中的三个循环小结
10-19
在这个例子中，我们获取所有`<li>`元素，并使用for循环为它们添加不同的CSS类，以实现隔行换色的效果。这里使用了三元运算符 `(i % 2 === 0) ? classA : classB` 来根据索引的奇偶性切换类名。 总结： JavaScript...
js---点击li输出当前li的索引号
wind的博客
02-12 747
1.动态添加属性的方法 <body> <ul> <li>星期1</li> <li>星期2</li> <li>星期3</li> <li>星期4</li> <li>星期5</li> </ul> </body> <script> v
div li隔行变色 鼠标悬浮高亮显示 jquery控制css样式
龚清林的博客
09-29 2107
$("table tr").eq(1).remove(); //删除第一行数据 $("#tbl1").find("tr").eq(0).remove(); //删除第一行数据，eq的下标是从0开始。 $("#tblContent tr:even").css("background-color", "#333"); //奇数行 $("#tblContent tr:odd
前端-table表格隔行变色
热门推荐
qsloony的博客
05-21 2万+
table表格隔行变色 作为一个后端的我，在某公司无前端工程师时，系统那体验自己用起来都想骂人了。今天就纪录一下，自己在后台经常用到的一个小玩意。 :nth-child(): 定义和用法 :nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式 使用:nth-child()可以表格数据看起来更加的直观，说到这我就得说说当时的情况：后
jsp页面怎么实现隔行变色
tangpeng2018的博客
04-12 7666
&lt;c:forEach var="student" items="${ students}" varStatus="status"&gt; &lt;c:if test=”${status.index % 2 == 0}”&gt; &lt;tr class = "even"&gt; --偶数行
前端安全攻防：XSS, CSRF 等常见威胁的防范与检测指南
最新发布
WSHAN_GEO的博客
09-09 420
原理： 服务器在用户登录时，在 Set-Cookie 响应头中发送一个 CSRF Token（可以与同步 Token 模式的 Token 相同），这个 Token 不保存在 Session 中（或与 Session Token 无关，但仍需动态生成、不可预测）。原理： 服务器生成一个唯一的、一次性的、与用户会话绑定的 Token，并通过表单中的隐藏字段 <input type="hidden" name="csrf_token" value="..."> 或在 AJAX 请求的响应头中发送给客户端。
java小项目 未来出行汽车租赁平台
xiaoyoukaoer的博客
09-06 305
未来出行汽车租赁平台是基于Java开发的汽车租赁管理系统，旨在为用户提供便捷的车辆租赁服务。系统包含用户管理、车辆管理、订单管理等功能模块，适用于小型企业或个人学习使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值