jquery案例3——jq隔行换色

耶啵奶膘

于 2022-05-16 21:45:30 发布

阅读量894

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/xulihua_75/article/details/124808954

版权

jquery 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

一、案例描述

隔行换色

二、案例效果演示

在这里插入图片描述

三、案例整体代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jQuery.min.js"></script>
    <style>
        ul li {
            margin-bottom: 10px;
            padding: 5px;
        }
    </style>
    <script>
        $(function() {
            //隔行变色
            $("ul li:odd").css("background", "green");
            $("ul li:even").css("background", "yellowgreen");
        });
    </script>
</head>

<body>
    <ul>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
    </ul>

</body>

</html>

四、总结

直接搬到自己电脑上不生效，请更改一下jq引入的路径。
或者换成线上地址

<script src="http://code.jquery.com/jquery-latest.js"></script>

耶啵奶膘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery案例3——jq隔行换色

一、案例描述隔行换色二、案例效果演示三、案例整体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫

专栏目录