隔行变色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .c1{
                background: red;  /*定义li为偶数时候的颜色*/
            }
            .c2{
                background: pink ;  /*定义li为奇数时候的颜色*/
            }
            ol li {
                     list-style: none;
                      width: 500px;  /*去除默认样式 定义li宽度为500px*/
            }
            ol li:hover{
                background: orange;  /*鼠标滑过时li的颜色*/
            }
        </style>
    </head>
    <body>
            <ol >
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
                <li>此处是内容...............</li>
            </ol>
        <script type="text/javascript">
            var oli=document.getElementsByTagName("li"); //获取li的标签
            for(i=0;i<oli.length;i++){
                var olis=oli[i];   //获取li有多少个 并赋值给kk
                i%2===0 ? olis.className="c1":olis.className="c2"; //li的偶数行颜色为c1 奇数行颜色为c2
                olis.onmouseout=function(){
                    this.className="c2";  //鼠标滑过后颜色为c2
                }
            }
        </script>
    </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • getByClass

    河湾欢儿
  • 第三节 json数据绑定以及dom回流重绘、映射

    河湾欢儿
  • 简易的星级评分

    河湾欢儿
  • jQuery基础--选择器

    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

    eadela
  • jQuery简单实现二级下拉菜单

    下拉菜单原理:滑过一级的li才让第二层的li显示,利用jq简单的抓取元素,让一级下的二级li显示就能解决,使用jq比css的思路更加明确!

    十月梦想
  • PHP之多条件混合筛选功能的实现方法

    以上这篇PHP之多条件混合筛选功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • Pug迭代

    听着music睡
  • pyhon 列表的增删改查

    py3study
  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study
  • js 为 li 循环添加 class

    前段时间有个小伙伴想在新闻列表页面的 ul 里面为每个 class 循环添加带 1  2  3  4的 class,正巧昨天做一个站也用到了类似 for 循环,...

    Savalone

扫码关注云+社区

领取腾讯云代金券