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

JS+CSS实现隔行换色

阅读更多
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接背景色隔行显示</title>
</head>
<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(http://www.blueidea.com/img/common/new_flash.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 {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new.gif) #D2FCA0 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}/* 鼠标经过时的背景色 */
</style>
<body>
<div id=tab>
<ul>
<li><a href="#">这个是第1行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第2行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第3行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第4行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第5行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第6行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第7行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第8行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第9行的文字,大家看清楚了</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>
分享到:
评论

相关推荐

    css+js隔行换色

    下面我们将详细讲解如何利用CSS和JS来实现隔行换色。 首先,我们从CSS开始。CSS是网页样式的核心,它允许我们定义元素的外观和布局。要实现隔行换色,我们可以使用`nth-child`伪类选择器。这个选择器允许我们选择...

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

    ### CSS结合JavaScript 实现Li隔行换色代码详解 #### 一、背景介绍 在网页设计与开发过程中,为了提高用户体验以及美观性,开发者经常需要对列表项进行样式处理,如实现列表项的隔行变色功能。这种功能不仅能够使...

    jquery 实现隔行换色

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

    jquery实现隔行换色特效代码.zip

    在实现隔行换色特效时,jQuery的简洁语法使得代码更易读、更易维护。下面将详细介绍实现这一特效的步骤和相关知识点。 首先,确保在项目中引入jQuery库。这通常通过在HTML文件中添加CDN链接或者本地引入jQuery.js...

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

    本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法。分享给大家供大家参考。具体实现方法如下: 代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    JavaScript隔行换色

    这个主题“JavaScript隔行换色”就是关于如何使用JavaScript来实现这个功能的。 隔行换色通常应用于HTML表格中,通过CSS样式进行基础设置,然后使用JavaScript来动态改变行的样式。以下是一个详细的步骤和知识点...

    一天搞定jQuery(二)——使用jQuery表格的隔行换色

    在本教程中,我们将深入探讨如何使用jQuery实现表格的隔行换色效果,这是一项常见的网页美化技术,可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化DOM操作,让...

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

    本示例"实现表格隔行换色效果"主要涉及JavaScript(JS)编程和HTML表格元素的使用,旨在通过JS特效提升用户体验。下面将详细解释如何利用JavaScript实现这一功能。 首先,我们需要理解HTML表格的基本结构。`&lt;table&gt;...

    CSS+JS实现table隔行变色

    在网页设计中,为了提升...综上所述,通过CSS和JavaScript的结合,我们可以轻松实现table隔行变色的效果,无论是静态页面还是动态内容,都能提供良好的阅读体验。在实际开发中,可以根据项目需求灵活选择合适的方法。

    jquery 隔行换色

    本教程将详细介绍如何使用`jQuery`实现隔行换色的特效,并通过两个实例帮助你理解和应用。 首先,我们需要理解基本的HTML结构,例如一个包含多行数据的表格。假设我们有以下HTML代码: ```html 数据1 数据2 ...

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

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

    jquery隔行换色和鼠标经过样式

    1. CSS基础:在不使用jQuery的情况下,我们通常会通过CSS的`:nth-child()`选择器来实现隔行换色。例如,给偶数行添加背景色: ```css tr:nth-child(even) { background-color: #f2f2f2; } ``` 2. jQuery实现:...

    可编辑的表格,实现隔行换色等效果

    接着,CSS用于实现隔行换色的效果。这里,我们可以使用伪类选择器`nth-child(odd)`和`nth-child(even)`来分别选择奇数行和偶数行,并赋予不同的背景颜色: ```css table tr.even { background-color: #f2f2f2; } ...

    JavaScript 实现表单的隔行换色代码

    总结来说,实现JavaScript表单隔行换色的核心在于使用DOM操作获取并遍历表格行,根据行的索引判断是否为偶数,然后动态添加CSS类来改变背景色。这种技术不仅可以提升用户对大量数据的阅读体验,也是JavaScript在网页...

    超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff)

    下面我们将详细探讨如何实现“超简单表格隔行换色+鼠标经过变色”这一功能,并兼容IE6、IE7以及Firefox。 首先,让我们从隔行换色开始。这是一种常见的CSS技巧,可以通过使用CSS伪类`:nth-child()`来实现。这个选择...

    表格隔行换色 鼠标移过变色

    隔行换色通常使用CSS(层叠样式表)来完成,通过设置不同的背景颜色或者使用渐变色,使表格的偶数行与奇数行呈现出不同的视觉效果。在CSS中,我们可以利用`nth-child`选择器来实现这个功能。例如: ```css tr:...

    CSS2+JS实现table隔行变色

    总结起来,结合CSS2和JavaScript可以轻松地为表格实现隔行变色的效果。在CSS中,我们利用`:nth-child()`伪类选择器或者自定义类来定义行的样式;在JavaScript中,我们通过DOM操作动态地添加或移除这些样式类,确保...

    CSS2实现的隔行换色

    CSS2实现的隔行换色 CSS2实现的隔行换色是使用CSS2的相邻选择符来实现的,该技术可以实现表格的隔行换色效果。该技术的优点是无需使用JavaScript脚本和class样式,只需使用CSS代码即可实现该效果。 首先,我们需要...

    基于Jquery的表格隔行换色,移动换色,点击换色插件

    标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能,包括隔行换色、移动换色以及点击换色。首先,我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...

Global site tag (gtag.js) - Google Analytics