jQuery实现隔行变色

隔行变色

最新推荐文章于 2022-05-16 21:45:30 发布

原创最新推荐文章于 2022-05-16 21:45:30 发布 · 565 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

2 篇文章

订阅专栏

通过jQuery实现网页中列表项的隔行变色效果，奇数行背景为红色，偶数行为黄色，点击按钮即可生效。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>隔行变色</title>
    <style>

        ul > li {
          text-align:center;
          width:50%;
          list-style:none;
        }
    </style>
    <script src="js/jquery-1.12.1.js"></script>
    <script> 
        /*
         * 要求：
         * 奇数行-------红色
         * 偶数行-------黄色 
         */
        //获取页面内容
        $(function () {
            //根据id 获取按钮并为其添加点击事件
            $('#btn').click(function () {
                //获取ul标签下的子代元素li并实现隔行变色
                $('ul>li:even').css('background','red'); //
                $('ul>li:odd').css('background', 'yellow');
            });
        });

    </script>
</head>
<body>
    <input type="button" value="隔行变色" id="btn">
    <ul>
        <li>《夜 / 秋夜客舍》</li>
        <li> ——唐代·杜甫</li>
        <li>露下天高秋水清，</li>
        <li> 空山独夜旅魂惊。</li>
        <li>疏灯自照孤帆宿，</li>
        <li> 新月犹悬双杵鸣。</li>
        <li>南菊再逢人卧病，</li>
        <li> 北书不至雁无情。</li>
        <li>步檐倚仗看牛斗，</li>
        <li>银汉遥应接凤城。</li>
    </ul>
</body>
</html>