jQuery排他思想

最新推荐文章于 2022-08-30 20:41:19 发布

济源IT小伙一枚

最新推荐文章于 2022-08-30 20:41:19 发布

阅读量442

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43518645/article/details/108109717

前端专栏收录该内容

12 篇文章

订阅专栏

本文通过一个具体的示例，展示了如何使用jQuery实现排他思想，即当点击按钮时，仅被点击的按钮背景变为红色，而其他按钮恢复默认颜色。这一技巧在网页交互设计中非常实用，有助于增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery排他思想

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery排它思想</title>
    <script src="../../js/jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
            $('button').click(function(){
                  $(this).css("background","red");
                  //排它
                  $(this).siblings('button').css("background","");
            });
        })
    </script>

</head>
<body>
    <button>盘它，点击变红色,其它为默认颜色</button>
    <button>盘它，点击变红色,其它为默认颜色</button>
    <button>盘它，点击变红色,其它为默认颜色</button>
    <button>盘它，点击变红色,其它为默认颜色</button>
    <button>盘它，点击变红色,其它为默认颜色</button>
    <button>盘它，点击变红色,其它为默认颜色</button>
</body>
</html>