jQuery implements simple button color change

In HTML and CSS, we want to set the color of a button. Although we can achieve the desired effect, the process is rather cumbersome. We can easily accomplish this task using jQuery.

Suppose now we have a set of buttons

When we click one of them, it turns pink, and when we click another one, all the buttons except the one that was clicked return to their original colors. What should we do?

In fact, it only takes a few lines of code to complete

<script>
 $(function(){
  $('Button').click(function(){
             //First set the clicked button color to pink$(this).css('background','pink');
             // Set the color of other sibling elements except the current element to "empty"
             //siblings is all the sibling elements of the selected current element (excluding the current element)
   $(this).siblings('button').css('background','');
  });
 });


</script>

The effect is as follows:

Here is the complete code:

<!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>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
  <button>Option 4</button>
  <button>Option 5</button>
  <button>Option 6</button>
  <button>Option 7</button>
 </div>
 <script>
 $(function(){
  $('Button').click(function(){
   $(this).css('background','pink');
   $(this).siblings('button').css('background','');
  });
 });
     </script>
 
</body>
 
</html>

As you can see, isn’t it much simpler when we use jQuery than just using CSS? We can use shorter codes to complete more complex operations.

You may also be interested in:

jQuery implements clicking left and right buttons to switch pictures
Use jQuery to implement sliding switching by clicking the left and right buttons
Realize the image switching effect by clicking the left and right buttons based on jQuery
jQuery with index button and automatic carousel switching special effects code sharing
jQuery slideshow special effects code sharing switch when the mouse moves over the button (2)
Jquery slideshow special effects code sharing switch when the mouse clicks the button (1)
Based on jQuery plug-in, create left and right buttons and title text image switching effect
jQuery implements hiding and displaying animation effects/dynamic decrement of input box characters/navigation button switching
Jquery imitates QQ Mall with left and right buttons to control the focus picture switching scrolling effect

<<: mysql8.0.11 winx64 installation and configuration tutorial

>>: Screen command and usage in Linux