1.效果

2.HTML

<div  class="left-content">
    <div id="button1" class="left-button"></div>
    <div id="button2" class="left-button"></div>
    <div id="button3" class="left-button"></div>
    <div id="button4" class="left-button"></div>
</div>

3.js

          var onOff1= true;
          var onOff2 = true;
          var onOff3 = true;
          var onOff4 = true;
          $("#button1").on('click', function () {
              if (onOff1) {
                  $("#button1").css("background-image", "url(/assets/images/map_button_11.png)");
                  $("#button2").css("background-image", "url(/assets/images/map_button_22.png)");
                  $("#button3").css("background-image", "url(/assets/images/map_button_32.png)");
                  $("#button4").css("background-image", "url(/assets/images/map_button_42.png)");
                  onOff1 = false;
                  onOff2 = true;
                  onOff3 = true;
                  onOff4 = true;
              } else {
                  $("#button1").css("background-image", "url(/assets/images/map_button_12.png)");
                  onOff1 = true;
              }
          });

          $("#button2").on('click', function () {
              if (onOff2) {
                  $("#button1").css("background-image", "url(/assets/images/map_button_12.png)");
                  $("#button2").css("background-image", "url(/assets/images/map_button_21.png)");
                  $("#button3").css("background-image", "url(/assets/images/map_button_32.png)");
                  $("#button4").css("background-image", "url(/assets/images/map_button_42.png)");
                  onOff1 = true;
                  onOff2 = false;
                  onOff3 = true;
                  onOff4 = true;
              } else {
                  $("#button2").css("background-image", "url(/assets/images/map_button_22.png)");
                  onOff2 = true;
              }
          })

          $("#button3").on('click', function () {
              if (onOff3) {
                  $("#button1").css("background-image", "url(/assets/images/map_button_12.png)");
                  $("#button2").css("background-image", "url(/assets/images/map_button_22.png)");
                  $("#button3").css("background-image", "url(/assets/images/map_button_31.png)");
                  $("#button4").css("background-image", "url(/assets/images/map_button_42.png)");
                  onOff1 = true;
                  onOff2 = true;
                  onOff3 = false;
                  onOff4 = true;
              } else {
                  $("#button3").css("background-image", "url(/assets/images/map_button_32.png)");
                  onOff3 = true;
              }
          })

          $("#button4").on('click', function () {
              if (onOff4) {
                  $("#button1").css("background-image", "url(/assets/images/map_button_12.png)");
                  $("#button2").css("background-image", "url(/assets/images/map_button_22.png)");
                  $("#button3").css("background-image", "url(/assets/images/map_button_32.png)");
                  $("#button4").css("background-image", "url(/assets/images/map_button_41.png)");
                  onOff1 = true;
                  onOff2 = true;
                  onOff3 = true;
                  onOff4 = false;
              } else {
                  $("#button4").css("background-image", "url(/assets/images/map_button_42.png)");
                  onOff4 = true;
              }
          })