纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

jQuery按钮颜色变化 jQuery实现简单的按钮颜色变化

Wellfancy   2021-08-08 我要评论
想了解jQuery实现简单的按钮颜色变化的相关内容吗,Wellfancy在本文为您仔细讲解jQuery按钮颜色变化的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:jQuery按钮颜色变化,jQuery颜色变化,jQuery按钮变化,下面大家一起来学习吧。

在HTML和CSS中我们想要完成一个对按钮颜色的设置,虽然也可以做到想要的效果,但过程比较繁琐,利用jQuery我们就可以轻松的完成这件事情。

假设现在我们有一组按钮

当我们点击其中一个的时候让它变成粉色,再点击另一个后除了被点击的按钮全部为原始颜色,我们应该怎样做呢

其实只需要简单的几行代码即可完成

<script>
 $(function(){
  $('Button').click(function(){
             //先设置点击的按钮颜色变为粉色
   $(this).css('background','pink');
             //再设置除了当前元素的其他兄弟元素的颜色为“空”
             //siblings是选中当前元素的所有兄弟元素(除去当前元素)
   $(this).siblings('button').css('background','');
  });
 });


</script>

效果如下:

 下面是完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Wellfancy</title>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
 div{
   border: 2px solid lightpink;
            margin: 50px auto;
            padding:50px ;
        }
    </style>
  
</head>
 
<body>   
 <div>
  <button>选项1</button>
  <button>选项2</button>
  <button>选项3</button>
  <button>选项4</button>
  <button>选项5</button>
  <button>选项6</button>
  <button>选项7</button>
 </div>
 <script>
 $(function(){
  $('Button').click(function(){
   $(this).css('background','pink');
   $(this).siblings('button').css('background','');
  });
 });
     </script>
 
</body>
 
</html>

可以看到,当我们使用jQuery时是不是比只用css要简单得多呢?我们可以利用更简短的代码完成更复杂的操作。


相关文章

猜您喜欢

  • jQuery淡入淡出效果 jQuery实现淡入淡出效果

    想了解jQuery实现淡入淡出效果的相关内容吗,Wellfancy在本文为您仔细讲解jQuery淡入淡出效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:jQuery,淡入淡出,下面大家一起来学习吧。..
  • Spring WebFlux 参数校验 Spring WebFlux实现参数校验的代码实例

    想了解Spring WebFlux实现参数校验的代码实例的相关内容吗,lzyer在本文为您仔细讲解Spring WebFlux 参数校验的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Spring,WebFlux,参数校验,Spring,参数校验,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.freefLashonLinegames.com 【木头下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式